<template>
  <div class="page-personal">
    <div class="page-personal-container">
      <div class="personal-left">
        <div class="user">
          <div class="head">
            <Upload
              action="#"
              :before-upload="handleUploadAvatar"
              :show-upload-list="false"
            >
              <img v-lazy="user_info.avatar" :key="user_info.avatar" alt="" />
            </Upload>
          </div>
          <div class="username">{{ this.user_info.acName }}</div>
          <div class="major">
            <img src="/img/pc/class.png" alt="" />
            <span>{{ user_info.className }}</span>
          </div>
        </div>
        <ul class="menu-list">
          <li
            :class="[
              'menu-item',
              this.$route.query.action === 'test_analysis' ? 'active' : ''
            ]"
            @click="handleSelect('test_analysis')"
            v-if="kl_md.KLXBTK != 1 && kl_md.KLDLTK != 1"
          >
            <img class="img1" src="/img/pc/test_analysis.png" alt="" />
            <img class="img2" src="/img/pc/test_analysis_active.png" alt="" />
            <span>考试分析</span>
          </li>
          <li
            :class="[
              'menu-item',
              this.$route.query.action === 'user_information' ? 'active' : ''
            ]"
            @click="handleSelect('user_information')"
          >
            <img class="img1" src="/img/pc/user_information.png" alt="" />
            <img
              class="img2"
              src="/img/pc/user_information_active.png"
              alt=""
            />
            <span>用户信息</span>
          </li>
          <li
            :class="[
              'menu-item',
              this.$route.query.action === 'message_center' ? 'active' : ''
            ]"
            @click="handleSelect('message_center')"
          >
            <img class="img1" src="/img/pc/message_center.png" alt="" />
            <img class="img2" src="/img/pc/message_center_active.png" alt="" />
            <span>消息中心</span>
          </li>
          <li
            :class="[
              'menu-item',
              this.$route.query.action === 'my_account' ? 'active' : ''
            ]"
            @click="handleSelect('my_account')"
          >
            <img class="img1" src="/img/pc/my_account.png" alt="" />
            <img class="img2" src="/img/pc/my_account_active.png" alt="" />
            <span>我的账户</span>
          </li>
          <li
            v-if="kl_md.KLFX == 1 && web_info.DISTRIBUTE_SWITCH == 1"
            :class="[
              'menu-item',
              this.$route.query.action === 'my_distribution' ? 'active' : ''
            ]"
            @click="handleSelect('my_distribution')"
          >
            <img class="img1" src="/img/pc/my_distribution.png" alt="" />
            <img class="img2" src="/img/pc/my_distribution_active.png" alt="" />
            <span>分销中心</span>
          </li>
        </ul>
        <div class="logout" @click="handleLogout">
          <img src="/img/pc/logout.png" alt="" />
          <span>退出登录</span>
        </div>
      </div>
      <div class="personal-right">
        <div
          class="test_analysis"
          v-if="this.$route.query.action === 'test_analysis'"
        >
          <div class="test_list">
            <div class="title">
              考试记录
            </div>
            <div class="test-tab">
              <Table
                style="margin:0 auto;"
                width="888"
                border
                :content="self"
                :columns="columnsTest"
                :data="record_list"
                :key="record_list"
              ></Table>
              <Page
                style="text-align:center;margin-top:20px;"
                :page-size="pageSize"
                :total="total"
                @on-change="handlePage"
              />
            </div>
          </div>
          <div class="test-content" v-if="false"></div>
        </div>
        <div
          class="user_information"
          v-if="this.$route.query.action === 'user_information'"
        >
          <div class="nav-bar">
            <div
              :class="['nav-item', informationNav == 'my-info' ? 'active' : '']"
              @click="toggleUserMsg('my-info')"
            >
              个人信息
            </div>
            <div
              :class="[
                'nav-item',
                informationNav == 'security-info' ? 'active' : ''
              ]"
              @click="toggleUserMsg('security-info')"
            >
              安全信息
            </div>
            <div
              :class="[
                'nav-item',
                informationNav == 'class-info' ? 'active' : ''
              ]"
              @click="toggleUserMsg('class-info')"
            >
              班级信息
            </div>
          </div>
          <div class="nav-content" v-show="informationNav == 'my-info'">
            <div class="singlepos">
              <p>{{ $t("locale.pc.personal.t11") }}:</p>
              <p>{{ this.user_info.acName }}</p>
            </div>
            <!-- 性别 -->
            <div class="singlepos">
              <p>{{ $t("locale.pc.personal.t12") }}:</p>
              <p>{{ this.user_info.gender | formatGender(self) }}</p>
            </div>
            <!-- 班级 -->
            <div class="singlepos">
              <p>{{ $t("locale.pc.personal.t15") }}:</p>
              <p>{{ getClassName(user_info.userClass) }}</p>
            </div>
            <!-- 生日 -->
            <div class="singlepos">
              <p>{{ $t("locale.pc.personal.t13") }}:</p>
              <p>
                {{ this.user_info.birthday | formatBirthday(self) }}
              </p>
            </div>
            <!-- 专业 -->
            <div class="singlepos">
              <p>{{ $t("locale.pc.personal.t14") }}:</p>
              <p>{{ getMajorName(user_info.major) }}</p>
            </div>
            <!-- 年级 -->
            <div class="singlepos" v-if="kl_md.KLYXRZ == 1">
              <p>年 级:</p>
              <p>{{ user_info.gradeName }}</p>
            </div>
            <!-- 报考院校 -->
            <div class="singlepos" v-if="kl_md.KLYXRZ == 1">
              <p>报考院校:</p>
              <p>{{ user_info.schoolCollegeName }}</p>
            </div>
            <!-- 身份证 -->
            <div class="singlepos">
              <p>{{ $t("locale.pc.personal.t16") }}:</p>
              <p>{{ this.user_info.idNumber }}</p>
            </div>
            <!-- 自我介绍 -->
            <div class="singlepos">
              <p class="personal_introduct">
                {{ $t("locale.pc.personal.t17") }}:
                {{ this.user_info.introduce }}
              </p>
            </div>
            <div class="singlepos">
              <Button type="primary" @click="messSetup = true">编辑</Button>
            </div>
          </div>
          <div
            class="nav-content-security"
            v-show="informationNav == 'security-info'"
          >
            <div class="set-row">
              <div style="width:240px;">
                <span>手机号码：{{ this.user_info.mobile }}</span>
              </div>
              <div>
                <Badge
                  v-if="this.user_info.mobile && this.user_info.mobile != ''"
                  status="processing"
                  :text="$t('locale.pc.personal.t20')"
                />
                <Badge
                  v-else
                  status="error"
                  :text="$t('locale.pc.personal.t21')"
                />
              </div>
              <div>
                <Button
                  size="small"
                  v-if="this.user_info.mobile && this.user_info.mobile != ''"
                  type="info"
                  @click="handleShowEdit('mobile')"
                  >更改</Button
                >
                <Button
                  size="small"
                  v-else
                  type="error"
                  @click="handleShowEdit('mobile')"
                  >{{ $t("locale.pc.personal.t22") }}</Button
                >
              </div>
            </div>
            <div class="set-row">
              <div style="width:240px;">
                <span>电子邮箱：{{ this.user_info.email }}</span>
              </div>
              <div>
                <Badge
                  v-if="this.user_info.email && this.user_info.email != ''"
                  status="processing"
                  :text="$t('locale.pc.personal.t20')"
                />
                <Badge
                  v-else
                  status="error"
                  :text="$t('locale.pc.personal.t21')"
                />
              </div>
              <div>
                <Button
                  size="small"
                  v-if="this.user_info.email && this.user_info.email != ''"
                  type="info"
                  @click="handleShowEdit('email')"
                  >更改</Button
                >
                <Button
                  size="small"
                  v-else
                  type="error"
                  @click="handleShowEdit('email')"
                  >{{ $t("locale.pc.personal.t22") }}</Button
                >
              </div>
            </div>
            <div class="set-row">
              <div style="width:240px;">
                <span
                  >微&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信：{{
                    this.user_info.wechatId &&
                    this.user_info.wechatId.replace(/(\s*$)/g, "")
                      ? this.user_info.wechat
                      : ""
                  }}</span
                >
              </div>
              <div>
                <Badge
                  v-if="
                    this.user_info.wechatId &&
                      this.user_info.wechatId.replace(/(\s*$)/g, '')
                  "
                  status="processing"
                  :text="$t('locale.pc.personal.t20')"
                />
                <Badge
                  v-else
                  status="error"
                  :text="$t('locale.pc.personal.t21')"
                />
              </div>
              <div>
                <Button
                  size="small"
                  v-if="
                    this.user_info.wechatId &&
                      this.user_info.wechatId.replace(/(\s*$)/g, '')
                  "
                  type="info"
                  @click="handleShowEdit('wechat')"
                  >更改</Button
                >
                <Button
                  size="small"
                  v-else
                  type="error"
                  @click="handleShowEdit('wechat')"
                  >{{ $t("locale.pc.personal.t22") }}</Button
                >
              </div>
            </div>
            <div class="set-row">
              <div style="width:240px;">
                <span>Q&nbsp;Q号码：{{ this.user_info.qq }}</span>
              </div>
              <div>
                <Badge
                  v-if="this.user_info.qq && this.user_info.qq != ''"
                  status="processing"
                  :text="$t('locale.pc.personal.t20')"
                />
                <Badge
                  v-else
                  status="error"
                  :text="$t('locale.pc.personal.t21')"
                />
              </div>
              <div>
                <Button
                  size="small"
                  v-if="this.user_info.qq && this.user_info.qq != ''"
                  type="info"
                  @click="handleShowEdit('qq')"
                  >更改</Button
                >
                <Button
                  size="small"
                  v-else
                  type="error"
                  @click="handleShowEdit('qq')"
                  >{{ $t("locale.pc.personal.t22") }}</Button
                >
              </div>
            </div>
            <div class="set-row">
              <div style="width:240px;">
                <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：已设置</span>
              </div>
              <div>
                <Badge
                  v-if="
                    this.user_info.password && this.user_info.password != ''
                  "
                  status="processing"
                  :text="$t('locale.pc.personal.t20')"
                />
                <Badge
                  v-else
                  status="error"
                  :text="$t('locale.pc.personal.t21')"
                />
              </div>
              <div>
                <Button
                  size="small"
                  v-if="
                    this.user_info.password && this.user_info.password != ''
                  "
                  type="info"
                  @click="handleShowEdit('password')"
                  >更改</Button
                >
                <Button
                  size="small"
                  v-else
                  type="error"
                  @click="handleShowEdit('password')"
                  >{{ $t("locale.pc.personal.t22") }}</Button
                >
              </div>
            </div>
          </div>
          <div
            class="class_info"
            v-if="informationNav == 'class-info' && userClassInfo"
          >
            <div class="class_info_row">
              <div class="class_info_row_left">班级名称：</div>
              <div class="class_info_row_right">{{ userClassInfo.name }}</div>
            </div>
            <div class="class_info_row">
              <div class="class_info_row_left">隶属专业：</div>
              <div class="class_info_row_right">
                {{ userClassInfo.majorName }}
              </div>
            </div>
            <div class="class_info_row">
              <div class="class_info_row_left">班级老师：</div>
              <div class="class_info_row_right">
                {{ userClassInfo.teacherName }}
              </div>
            </div>
            <div class="class_info_row">
              <div class="class_info_row_left">班级编码：</div>
              <div class="class_info_row_right">{{ userClassInfo.coding }}</div>
            </div>
            <div class="class_info_row">
              <div class="class_info_row_left">开班时间：</div>
              <div class="class_info_row_right">
                {{ formatDate(userClassInfo.openTime) }}
              </div>
            </div>
            <div class="class_info_row">
              <div class="class_info_row_left">所属院系：</div>
              <div class="class_info_row_right">
                {{ userClassInfo.facultyName }}
              </div>
            </div>
            <div class="class_info_row">
              <div class="class_info_row_left">班级介绍：</div>
              <div class="class_info_row_right">
                {{ userClassInfo.introduction }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="message_center"
          v-if="this.$route.query.action === 'message_center'"
        >
          <div class="nav-bar">
            <div
              :class="['nav-item', messageNav == 'my-msg' ? 'active' : '']"
              @click="toggleMessage('my-msg')"
            >
              我的信息
            </div>
            <div
              :class="['nav-item', messageNav == 'class-msg' ? 'active' : '']"
              @click="toggleMessage('class-msg')"
            >
              班级公告
            </div>
          </div>
          <div class="nav-content" v-show="messageNav == 'my-msg'">
            <div
              class="news"
              v-for="(item, index) in notification_list"
              :key="'c' + index"
            >
              <div
                class="new-left"
                @click="$router.push('/noticedetail?type=1&id=' + item.id)"
              >
                <Badge
                  dot
                  :count="readList.indexOf(item.id) != -1 ? 0 : 1"
                ></Badge
                >消息：{{ item.name }}
              </div>
              <div class="new-right">{{ trimDate(item.startTime) }}</div>
            </div>
            <div class="pagination">
              <Page
                :total="notification.total"
                :page-size="notification.pageSize"
                @on-change="
                  n => {
                    handleChangePage(1, n);
                  }
                "
              />
            </div>
          </div>
          <div class="nav-content" v-show="messageNav == 'class-msg'">
            <div
              class="news"
              v-for="(item, index) in notice_list"
              :key="'d' + index"
            >
              <div
                class="new-left"
                @click="$router.push('/noticedetail?type=2&id=' + item.id)"
              >
                <Badge
                  dot
                  :count="readList.indexOf(item.id) != -1 ? 0 : 1"
                ></Badge
                >公告：{{ item.name }}
              </div>
              <div class="new-right">{{ trimDate(item.startTime) }}</div>
            </div>
            <div class="pagination">
              <Page
                :total="notice.total"
                :page-size="notice.pageSize"
                @on-change="
                  n => {
                    handleChangePage(2, n);
                  }
                "
              />
            </div>
          </div>
        </div>
        <div
          class="my_account"
          v-if="this.$route.query.action === 'my_account'"
        >
          <div class="nav-bar">
            <div
              :class="[
                'nav-item',
                accountNav == 'account-balance' ? 'active' : ''
              ]"
              @click="toggleAccount('account-balance')"
            >
              账户余额
            </div>
            <div
              :class="['nav-item', accountNav == 'my-cart' ? 'active' : '']"
              @click="toggleAccount('my-cart')"
            >
              学习卡
            </div>
            <div
              :class="[
                'nav-item',
                accountNav == 'recharge-record' ? 'active' : ''
              ]"
              @click="toggleAccount('recharge-record')"
            >
              消费记录
            </div>
          </div>
          <div class="nav-content" v-show="accountNav == 'account-balance'">
            <div class="account_information">
              <span class="account-left">当前账户余额：</span>
              <span class="account-right">
                <animate-number
                  :from="num_start"
                  :to="user_info.balance || 0"
                  duration="1000"
                  easing="easeOutQuad"
                  :formatter="formatter"
                  ref="number"
                ></animate-number>
              </span>
              <span class="account-unit">元</span>
            </div>
            <div class="recharge">
              充值金额（元）：
              <Input
                :value="recharge_num"
                :min="0"
                @on-change="handleInput"
                :placeholder="$t('locale.pc.personal.t137')"
                type="number"
                style="width: 300px"
              />
            </div>
            <div class="paymethod">
              <div class="pay-title">支付方式</div>
              <div class="pay-content">
                <RadioGroup v-model="pay_type">
                  <Radio label="alipay">
                    <div
                      :class="[
                        'pay-box',
                        pay_type === 'alipay' ? 'active' : ''
                      ]"
                    >
                      <img src="/img/pc/zhifubao.png" alt="" />
                      支付宝支付
                    </div>
                  </Radio>
                  <Radio label="wechatpay">
                    <div
                      :class="[
                        'pay-box',
                        pay_type === 'wechatpay' ? 'active' : ''
                      ]"
                    >
                      <img src="/img/pc/weixin.png" alt="" />
                      微信支付
                    </div>
                  </Radio>
                </RadioGroup>
              </div>
            </div>
            <!-- <div class="read-msg">
              <Checkbox v-model="readSingle">我已了解：充值的款项只可用于购买消费，我同意购买守则，取消政策和退款政策，我也同意支付以下所示的总金额。</Checkbox>
            </div> -->
            <div class="paysubmit">
              <i-button @click="handlePay">{{
                $t("locale.pc.personal.t45")
              }}</i-button>
            </div>
          </div>
          <div class="nav-content" v-show="accountNav == 'my-cart'">
            <div class="study-title">卡密激活：</div>
            <div class="input-cart-number">
              <i-input
                v-model="card_account"
                :placeholder="$t('locale.pc.personal.t49')"
                style="width:360px"
              >
                <span slot="prepend">学习卡</span></i-input
              >
              <i-button style="margin-left:20px;" @click="activeCard">{{
                $t("locale.pc.personal.t50")
              }}</i-button>
            </div>
            <div class="study-title">激活记录：</div>
            <i-table
              border
              width="800"
              :columns="columns3"
              :data="activation_record_list"
              :key="activation_record_list"
              style="margin:20px 0"
            ></i-table>
            <div style="text-align:center;">
              <Page
                :total="activation_record.total"
                :page-size="activation_record.pageSize"
                @on-change="handleChangeActivationRecordPage"
              />
            </div>
          </div>
          <div class="nav-content" v-show="accountNav == 'recharge-record'">
            <!-- <div class="study-title">充值明细：</div>
            <i-table
              width="800"
              border
              :columns="columns2"
              :data="water_list"
              style="margin:20px 0"
            ></i-table>
            <div style="text-align:center;">
              <Page
                :total="water.total"
                :page-size="water.pageSize"
                @on-change="handleChangeWaterPage"
              />
            </div> -->
            <!-- 消费记录 -->
            <div
              class="buy-water-box"
              v-for="(item, index) in buy_water_list"
              :key="index"
            >
              <div class="box-title">
                <span style="margin-right:30px;"
                  >下单时间：{{ item.createTime | formatDateTime }}</span
                >
                <span>订单号：{{ item.orderNo }}</span>
              </div>
              <div class="box-content">
                <Row>
                  <Col span="5">
                    <img
                      class="course-img"
                      :src="
                        item.course
                          ? item.course.iconPath
                          : item.questionGroup
                          ? item.questionGroup.cover
                          : ''
                      "
                      alt=""
                    />
                  </Col>
                  <Col span="11">
                    <div class="course-name">
                      {{ item.name }}
                    </div>
                    <!-- <div class="acname">{{item.course?item.course.teacher:''}}</div> -->
                  </Col>
                  <Col span="4">
                    <div class="price-num">
                      <span>应付：</span>
                      <span style="color: #ff7c7c;"
                        >￥{{ item.originalPrice || "未知" }}</span
                      >
                    </div>
                    <div class="price-num">
                      <span>实付：</span>
                      <span style="color: #ff7c7c;">￥{{ item.cost }}</span>
                    </div>
                  </Col>
                  <Col span="4">
                    <div class="look-course">
                      <span
                        v-if="item.type == 1"
                        @click="toPath('coursedetail?id=' + item.productId)"
                        >查看课程</span
                      >
                      <!-- <span v-if="item.type == 2" @click="toPath('coursedetail?id='+item.productId)">查看会员</span> -->
                    </div>
                  </Col>
                </Row>
              </div>
            </div>

            <div style="text-align:center;">
              <Page
                :total="buyWater.total"
                :page-size="buyWater.pageSize"
                @on-change="handleChangeBuyWaterPage"
              />
            </div>
          </div>
        </div>
        <div
          class="my_distribution"
          v-if="this.$route.query.action === 'my_distribution'"
        >
          <Tabs
            :animated="false"
            v-model="distribution_tap_active"
            @on-click="handleDistributionTapChange"
          >
            <Tab-pane :label="$t('locale.pc.personal.t138')" name="1">
              <div class="distribution_prefix">
                <p class="p1"></p>
                <p>{{ $t("locale.pc.personal.t139") }}</p>
              </div>
              <div class="user_balance">
                <div class="author">
                  <img class="head" src="/img/pc/avatar07.png" alt="" />
                </div>
                <div class="money_content">
                  <span>
                    <Tooltip
                      :content="
                        $t('locale.pc.personal.t140') +
                          distribution_info.freezeDay +
                          $t('locale.pc.personal.t141')
                      "
                      placement="top"
                    >
                      <Icon
                        type="ios-help-circle"
                        style="cursor:pointer;line-height: 2;"
                      />
                    </Tooltip>
                    {{ $t("locale.pc.personal.t142") }}:</span
                  >
                  <span style="margin-right:5px;"
                    >{{ $t("locale.pc.personal.t137")
                    }}{{
                      distribution_info.freezeMoney
                        ? distribution_info.freezeMoney.toFixed(2)
                        : "0.00"
                    }}</span
                  >
                  <span>{{ $t("locale.pc.personal.t143") }}:</span>
                  <span class="money" style="margin-right:5px;"
                    >￥{{
                      distribution_info.profit
                        ? (
                            distribution_info.profit -
                            distribution_info.freezeMoney
                          ).toFixed(2)
                        : "0.00"
                    }}</span
                  >
                  <span>{{ $t("locale.pc.personal.t144") }}:</span>
                  <span
                    >￥{{
                      distribution_info.oldWithdrawal
                        ? distribution_info.oldWithdrawal.toFixed(2)
                        : "0.00"
                    }}</span
                  >
                </div>
                <div class="withdrawal">
                  <!-- <i-button type="primary">提现至余额</i-button>
                      <i-button type="primary">提现至微信</i-button>
                      <i-button type="primary">提现至支付宝</i-button> -->
                </div>
                <div class="share_btn" @click="submitWithdrawal">
                  {{ $t("locale.pc.personal.t145") }}
                </div>
                <div class="share_btn" @click="copy">
                  {{ $t("locale.pc.personal.t146") }}
                </div>
              </div>
              <div class="distribution_prefix">
                <p class="p1"></p>
                <p>{{ $t("locale.pc.personal.t147") }}</p>
              </div>
              <i-table
                border
                width="800"
                height="400"
                :columns="distribution_columns"
                :data="distribution_order_list"
                :key="distribution_order_list"
              ></i-table>
              <Page
                :total="distribution_order.total"
                :page-size="distribution.pageSize"
                @on-change="handleChangeDistributionPage"
              />
            </Tab-pane>
            <Tab-pane :label="$t('locale.pc.personal.t148')" name="2">
              <div class="distribution_prefix">
                <p class="p1"></p>
                <p>{{ $t("locale.pc.personal.t148") }}:</p>
              </div>
              <i-table
                width="800"
                height="600"
                border
                :columns="withdrawal_columns"
                :data="withdrawal_list"
                :key="withdrawal_list"
              ></i-table>
              <Page
                :total="withdrawal_log.total"
                :page-size="withdrawal.pageSize"
                @on-change="handleChangeWithdrawalPage"
              />
            </Tab-pane>
          </Tabs>
        </div>
      </div>
    </div>
    <div class="page-pc_poster" v-show="is_show_poster">
      <div class="poster" style="display:none;">
        <!-- <img
          id="poster"
          ref="posterImg"
          alt
          style="width: 300px;height: 480px;"
        /> -->
        <img
          id="poster"
          ref="posterImg"
          alt
          style="width: 750px;height: 1200px;"
        />
      </div>
      <div class="poster_url" id="poster_box" style="display:none;">
        <img id="poster_url" src="" alt style="width: 300px;height: 480px;" />
      </div>
      <div id="qrcode"></div>
      <canvas id="myCanvas"></canvas>
      <div class="btn">
        <div class="close" @click="closePoster">
          {{ $t("locale.pc.personal.t149") }}
        </div>
        <div class="download" @click="downloadPoster">
          <Icon type="md-arrow-down" />{{ $t("locale.pc.personal.t150") }}
        </div>
      </div>
    </div>
    <Modal
      :title="$t('locale.pc.personal.t145')"
      v-model="is_show_withdrawal_modal"
      :mask-closable="false"
    >
      <Form
        ref="withdrawalFormItem"
        :model="withdrawalFormItem"
        :rules="withdrawalRuleValidate"
        :label-width="120"
      >
        <FormItem :label="$t('locale.pc.personal.t151')" prop="withdrawalMoney">
          <Input
            v-model="withdrawalFormItem.withdrawalMoney"
            :placeholder="$t('locale.pc.personal.t153')"
          />
        </FormItem>
        <FormItem :label="$t('locale.pc.personal.t152')" prop="withdrawalType">
          <Select
            v-model="withdrawalFormItem.withdrawalType"
            :placeholder="$t('locale.pc.personal.t154')"
          >
            <Option value="0">{{ $t("locale.pc.personal.t155") }}</Option>
            <!-- <Option value="1">微信</Option> -->
            <Option value="2">{{ $t("locale.pc.personal.t156") }}</Option>
          </Select>
        </FormItem>
        <FormItem
          :label="$t('locale.pc.personal.t157')"
          prop="payee"
          v-if="withdrawalFormItem.withdrawalType == 2"
        >
          <Input
            v-model="withdrawalFormItem.payee"
            :placeholder="$t('locale.pc.personal.t158')"
          />
        </FormItem>
        <FormItem
          :label="$t('locale.pc.personal.t159')"
          prop="paymentAccount"
          v-if="withdrawalFormItem.withdrawalType == 2"
        >
          <Input
            v-model="withdrawalFormItem.paymentAccount"
            :placeholder="$t('locale.pc.personal.t160')"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button
          type="text"
          @click="handleCancelWithdrawal('withdrawalFormItem')"
          >{{ $t("locale.pc.personal.t161") }}</Button
        >
        <Button
          type="primary"
          @click="handleSubmitWithdrawal('withdrawalFormItem')"
          >{{ $t("locale.pc.personal.t162") }}</Button
        >
      </div>
    </Modal>
    <Modal
      v-model="is_show_security_modal"
      :title="security_edit_title"
      footer-hide
    >
    <div v-if="security_edit_type != 'wechat' && security_edit_type != 'password'">
      <Form
        ref="securityFormItem"
        :label-width="80"
        :model="securityFormItem"
        :rules="userInfoRules"
      >
        <FormItem label="QQ：" v-show="security_edit_type == 'qq'">
          <Input
            v-model="securityFormItem.qq"
            :placeholder="$t('locale.pc.personal.t53')"
          />
        </FormItem>
        <FormItem
          :label="$t('locale.pc.personal.t56')"
          v-show="security_edit_type == 'mobile'"
          prop="mobile"
        >
          <Input
            v-model="securityFormItem.mobile"
            :placeholder="$t('locale.pc.personal.t57')"
          />
        </FormItem>
        <FormItem
          :label="$t('locale.pc.personal.t58')"
          v-show="security_edit_type == 'email'"
          prop="email"
        >
          <Input
            v-model="securityFormItem.email"
            :placeholder="$t('locale.pc.personal.t59')"
          />
        </FormItem>
        <FormItem>
          <Button @click="handleCancelForm('securityFormItem')">取消</Button>
          <Button
            type="primary"
            style="margin-left: 8px"
            @click="handleEditSecurity('securityFormItem')"
            >确定</Button
          >
        </FormItem>
      </Form>
    </div>
      
      <!-- <template v-if="security_edit_type == 'qq'">
        <Form :label-width="80">
          <FormItem label="QQ：">
            <Input
              v-model="securityFormItem.qq"
              :placeholder="$t('locale.pc.personal.t53')"
            />
          </FormItem>
        </Form>
      </template> -->

      <div v-if="security_edit_type == 'wechat'">
        <i-button
          @click="
            wechatAction(
              user_info.wechatId && user_info.wechatId.replace(/(\s*$)/g, '')
                ? 'unbind'
                : 'bind'
            )
          "
          >{{
            user_info.wechatId && user_info.wechatId.replace(/(\s*$)/g, "")
              ? $t("locale.pc.personal.t54")
              : $t("locale.pc.personal.t55")
          }}</i-button
        >
      </div>

      <!-- <template v-if="security_edit_type == 'mobile'">
        <Form :label-width="80" :model="securityFormItem">
          <FormItem :label="$t('locale.pc.personal.t56')" prop='mobile' :rules="validatePhone">
            <Input
              v-model="securityFormItem.mobile"
              :placeholder="$t('locale.pc.personal.t57')"
              
            />
          </FormItem>
        </Form>
      </template> -->

      <!-- <template v-if="security_edit_type == 'email'">
        <Form :label-width="80" :model="securityFormItem">
          <FormItem :label="$t('locale.pc.personal.t58')" prop='email' :rules="validateEmail">
            <Input
              v-model="securityFormItem.email"
              :placeholder="$t('locale.pc.personal.t59')"
            />
          </FormItem>
        </Form>
      </template> -->

      <div v-if="security_edit_type == 'password'">
        <i-form
          :label-width="100"
          ref="security_form"
          :model="passFormItem"
          :rules="passFormRules"
        >
          <Form-item label="邮箱" v-if="web_info.VERIFY_TYPE == 0">
            <i-input
              style="width: 355px;"
              :value="user_info.email"
              :disabled="true"
            ></i-input>
          </Form-item>
          <Form-item label="手机" v-if="web_info.VERIFY_TYPE == 1">
            <i-input
              style="width: 355px;"
              :value="user_info.mobile"
              :disabled="true"
            ></i-input>
          </Form-item>
          <Form-item
            :label="$t('locale.pc.personal.t61')"
            prop="code"
            v-if="web_info.VERIFY_TYPE == 0"
          >
            <i-input
              style="width: 205px !important;"
              v-model="passFormItem.code"
            ></i-input>
            <i-button @click="sendEmailCode" :disabled="seconds !== 0">{{
              seconds !== 0
                ? seconds + $t("locale.pc.personal.t62")
                : $t("locale.pc.personal.t63")
            }}</i-button>
          </Form-item>
          <Form-item
            :label="$t('locale.pc.personal.t61')"
            prop="code"
            v-if="web_info.VERIFY_TYPE == 1"
          >
            <i-input
              style="width: 205px !important;"
              v-model="passFormItem.code"
            ></i-input>
            <i-button @click="sendPhoneCode" :disabled="seconds !== 0">{{
              seconds !== 0
                ? seconds + $t("locale.pc.personal.t62")
                : $t("locale.pc.personal.t63")
            }}</i-button>
          </Form-item>
          <Form-item :label="$t('locale.pc.personal.t64')" prop="newPwd">
            <i-input
              style="width: 355px;"
              v-model="passFormItem.newPwd"
              type="password"
            ></i-input>
          </Form-item>
          <FormItem>
            <Button @click="handleCancelForm('securityFormItem')">取消</Button>
            <Button
              type="primary"
              style="margin-left: 8px"
              @click="handleEditSecurity('security_form')"
              >确定</Button
            >
          </FormItem>
        </i-form>
      </div>
    </Modal>
    <!-- 修改个人信息 -->
    <Modal
      v-model="messSetup"
      :title="$t('locale.pc.personal.t65')"
      :loading="loading"
      @on-ok="handleSubmit"
      @on-cancel="handeCancel"
    >
      <i-form :model="formItem" :label-width="100">
        <!-- <Form-item label="昵称:">
          <i-input v-model="formItem.acName" style="width: 355px;"></i-input>
        </Form-item> -->
        <Form-item :label="$t('locale.pc.personal.t66')">
          <i-input v-model="formItem.acName" style="width: 355px"></i-input>
        </Form-item>
        <Form-item :label="$t('locale.pc.personal.t67')">
          <RadioGroup v-model="formItem.gender">
            <Radio :label="1">{{ $t("locale.pc.personal.t68") }}</Radio>
            <Radio :label="0">{{ $t("locale.pc.personal.t69") }}</Radio>
          </RadioGroup>
        </Form-item>
        <Form-item :label="$t('locale.pc.personal.t70')">
          <Date-picker
            v-model="formItem.birthday"
            type="date"
            :placeholder="$t('locale.pc.personal.t71')"
            style="width: 200px"
          ></Date-picker>
        </Form-item>
        <Form-item :label="$t('locale.pc.personal.t75')">
          <i-input v-model="formItem.idNumber" style="width: 355px;"></i-input>
        </Form-item>
        <Form-item :label="$t('locale.pc.personal.t72')">
          <i-input
            v-model="formItem.introduce"
            type="textarea"
            :rows="4"
            :placeholder="$t('locale.pc.personal.t73')"
          ></i-input>
        </Form-item>
      </i-form>
    </Modal>

    <Modal v-model="is_show_wechat_pay" :title="$t('locale.pc.personal.t74')">
      <div style="text-align:center;">
        <img :src="wechat_pay_qr" />
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  userInfoUpdate,
  uploadAvatar,
  getEmailCode,
  updatePass,
  wxQrLogin,
  userLogout,
  getSmsCode,
  unbindWechat
} from "~/api/account/user.js";
import {
  buildPcOrder,
  buildPcAliOrder,
  checkOrderNum,
  cardActivate
} from "~/api/account/wallet";
import {
  getWaterList,
  getActivationRecordList,
  getBuyWaterList
} from "~/api/order";
import { paperTestList, getMyTestLog } from "~/api/test.js";
import { getClassInfo } from "~/api/class.js";
import { getNotice, getReadNotice } from "~/api/index";
import {
  getDistributionInfo,
  getDistributionOrder,
  getWithdrawalLog,
  getQrcode,
  toWithdrawal
} from "~/api/distribution";
import { formatDate, formatDateBirthday } from "~/utils/date";
// import "~/utils/qrcode";
import { baseUrl, socketUrl } from "~/config/conf";
import { mapState, mapActions, mapMutations } from "vuex";
import { strToHexCharCode, hexCharCodeToStr } from "~/utils/commonfun";
import { downloadFile } from "~/api/common";
import { fileToBase64 } from "~/utils/file";
const defaultWithdrawal = {
  userId: null,
  withdrawalMoney: null,
  withdrawalType: "",
  payee: "",
  paymentAccount: ""
};
export default {
  components: {},
  data() {
    const validateemail = (rule, value, callback) => {
      if (value == "") {
        callback(new Error(this.$t("locale.pc.regist.t35")));
      } else if (
        !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value)
      ) {
        callback(new Error(this.$t("locale.pc.regist.t36")));
      }
      callback();
    };
    const validatephone = (rule, value, callback) => {
      if (value == "") {
        callback(new Error(this.$t("locale.pc.regist.t38")));
      } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        callback(new Error(this.$t("locale.pc.regist.t39")));
      }
      callback();
    };
    const _this = this;
    return {
      validatePhone: [
        {
          required: true,
          validator: validatephone,
          trigger: "blur"
        }
      ],
      validateEmail: [
        {
          required: true,
          validator: validateemail,
          trigger: "blur"
        }
      ],
      userClassInfo: {},
      informationNav: "my-info",
      messageNav: "my-msg",
      accountNav: "account-balance",
      readSingle: false, //阅读支付规则
      readList: [],

      pwdModal: false,
      messSetup: false,

      self: this,
      courses: {},
      columns3: [
        {
          title: _this.$t("locale.pc.personal.t76"),
          key: "name",
          align: "center",
          render(_, row) {
            if (!row.row.studyCard) {
              return <span>{_this.$t("locale.pc.personal.unknow")}</span>;
            }
            let name =
              row && row.row && row.row.studyCard && row.row.studyCard.name;
            return <span>{name}</span>;
          }
          // fixed: "left"
        },
        {
          title: _this.$t("locale.pc.personal.t77"),
          key: "code",
          align: "center",
          width: 180
        },

        {
          title: _this.$t("locale.pc.personal.t78"),
          key: "cost",
          align: "center",
          width: 80,
          render(_, row) {
            if (!row.row.studyCard) {
              return <span>{_this.$t("locale.pc.personal.unknow")}</span>;
            }
            let cost =
              row && row.row && row.row.studyCard && row.row.studyCard.cost;
            return <span>{cost}</span>;
          }
        },
        {
          title: _this.$t("locale.pc.personal.t79"),
          key: "validityTime",
          align: "center",
          width: 300,
          render(_, row) {
            try {
              if (!row.row.studyCard) {
                return <span>{_this.$t("locale.pc.personal.unknow")}</span>;
              }
              let startDate = row.row.studyCard.startTime;
              let endDate = row.row.studyCard.endTime;
              if (startDate && endDate) {
                let _date = new Date(startDate);
                let _date1 = new Date(endDate);
                var year = _date.getFullYear();
                var month = _date.getMonth() + 1;
                var day = _date.getDate();
                var hours = _date.getHours();
                var minutes = _date1.getMinutes();
                var year1 = _date1.getFullYear();
                var month1 = _date1.getMonth() + 1;
                var day1 = _date1.getDate();
                var hours1 = _date1.getHours();
                var minutes1 = _date1.getMinutes();
                if (month < 10) {
                  month = "0" + month;
                }
                if (day < 10) {
                  day = "0" + day;
                }
                if (hours < 10) {
                  hours = "0" + hours;
                }
                if (minutes < 10) {
                  minutes = "0" + minutes;
                }
                if (month1 < 10) {
                  month1 = "0" + month1;
                }
                if (day1 < 10) {
                  day1 = "0" + day1;
                }
                if (hours1 < 10) {
                  hours1 = "0" + hours1;
                }
                if (minutes1 < 10) {
                  minutes1 = "0" + minutes1;
                }
                return (
                  <span>
                    {year +
                      "." +
                      month +
                      "." +
                      day +
                      " " +
                      hours +
                      ":" +
                      minutes}
                    {_this.$t("locale.pc.personal.t80")}
                    {year1 +
                      "." +
                      month1 +
                      "." +
                      day1 +
                      " " +
                      hours1 +
                      ":" +
                      minutes1}
                  </span>
                );
              } else {
                return _this.$t("locale.pc.personal.unknow");
              }
            } catch (e) {
              console.log(e);
            }
          }
        }
      ],
      columns2: [
        // {
        //   title: "序号",
        //   key: "id",
        //   align: "center",
        //   width: 60,
        //   render(_, row) {

        //     return <span>{row.row.id}</span>;
        //   }
        // },
        {
          title: _this.$t("locale.pc.personal.t81"),
          key: "outTradeNo",
          align: "center",
          width: 300,
          render(_, row) {
            return <span>{row.row.outTradeNo}</span>;
          }
        },
        {
          title: _this.$t("locale.pc.personal.t82"),
          key: "payPlatform",
          align: "center",
          // width: 200,
          render(_, row) {
            let txt =
              row.row.payPlatform == "alipay"
                ? _this.$t("locale.pc.personal.t83")
                : row.row.payPlatform == "wechat"
                ? _this.$t("locale.pc.personal.t84")
                : row.row.payPlatform;
            // let type = null;
            // if(row.row.payPlatform == "alipay"){
            //   type = "支付宝";
            // }else if(row.row.payPlatform == "wechat"){
            //   type = "微信"
            // }
            return <span>{txt}</span>;
            // return <span>{type}支付</span>;
          }
        },
        {
          title: _this.$t("locale.pc.personal.t85"),
          key: "cashFee",
          align: "center",
          // width: 180,
          render(_, row) {
            return (
              <span>
                {row.row.cashFee}
                {_this.$t("locale.pc.personal.t40")}
              </span>
            );
          }
        },
        {
          title: _this.$t("locale.pc.personal.t86"),
          key: "tradeTime",
          align: "center",
          // width: 180,
          render(_, row) {
            let date = row.row.tradeTime;
            // console.log(date);
            if (date) {
              let _date = new Date(date);
              var year = _date.getFullYear();
              var month = _date.getMonth() + 1;
              var day = _date.getDate();
              var hours = _date.getHours();
              var minutes = _date.getMinutes();
              if (month < 10) {
                month = "0" + month;
              }
              if (day < 10) {
                day = "0" + day;
              }
              if (hours < 10) {
                hours = "0" + hours;
              }
              if (minutes < 10) {
                minutes = "0" + minutes;
              }
              return (
                <span>
                  {year + "." + month + "." + day + " " + hours + ":" + minutes}
                </span>
              );
            } else {
              return _this.$t("locale.pc.personal.unknow");
            }
          }
        }
        // {
        //   title: "操作",
        //   key: "action",
        //   // fixed: "right",
        //   width: 120,
        //   render() {
        //     return <a href>查看课程></a>;
        //   }
        // }
      ],
      // 考试分析表格
      columnsTest: [
        {
          align: "center",
          title: _this.$t("locale.pc.personal.t87"),
          key: "paperName"
        },
        {
          align: "center",
          title: _this.$t("locale.pc.personal.t88"),
          key: "score",
          width: 100
        },
        {
          title: _this.$t("locale.pc.personal.t89"),
          key: "createTime",
          align: "center",
          render: (h, params) => {
            let createTime = "";
            createTime = formatDate(params.row.createTime);
            return h(
              "div",
              {
                props: {}
              },
              createTime
            );
          }
        },
        // {
        //   title: "用时",
        //   key: "when"
        // },
        {
          title: _this.$t("locale.pc.personal.t90"),
          key: "result",
          align: "center",
          render: (h, { row }) => {
            if (row.score >= row.passScore) {
              return h("Badge", {
                props: {
                  status: "success",
                  text: _this.$t("locale.pc.personal.t91")
                }
              });
            } else if (row.score < row.passScore) {
              return h("Badge", {
                props: {
                  status: "error",
                  text: _this.$t("locale.pc.personal.t92")
                }
              });
            }
          }
        }
        // {
        //   title: "操作",
        //   key: "operation",
        //   align: 'center',
        //   render: (h, params) => {
        //     return h("div", [
        //       h(
        //         "Button",
        //         {
        //           props: {
        //             type: "primary",
        //             size: "small"
        //           },
        //           style: {
        //             marginRight: "5px"
        //           },
        //           on: {
        //             click: () => {
        //               this.showTest(params.row.paperId,params.row.id);
        //             }
        //           }
        //         },
        //         "考试回顾"
        //       )
        //     ]);
        //   }
        // }
      ],
      columns4: [
        {
          title: _this.$t("locale.pc.personal.t93"),
          key: "name",
          width: 180
          // fixed: "left"
        },
        {
          title: _this.$t("locale.pc.personal.t94"),
          key: "order",
          width: 180
        },
        {
          title: _this.$t("locale.pc.personal.t95"),
          key: "province",
          width: 100
        },
        {
          title: _this.$t("locale.pc.personal.t96"),
          key: "city",
          width: 100
        },
        {
          title: _this.$t("locale.pc.personal.t97"),
          key: "address",
          width: 80
        },
        {
          title: _this.$t("locale.pc.personal.t98"),
          key: "zip",
          width: 150
        },
        {
          title: _this.$t("locale.pc.personal.t99"),
          key: "action",
          // fixed: "right",
          width: 120,
          render() {
            return <a href>{_this.$t("locale.pc.personal.t100")}</a>;
          }
        }
      ],
      data4: [],
      // 分销佣金记录
      distribution_columns: [
        {
          title: _this.$t("locale.pc.personal.t163"),
          key: "orderNo",
          align: "center"
        },
        {
          title: _this.$t("locale.pc.personal.t164"),
          key: "courseName",
          align: "center",
          width: 250
          // render(_, row) {

          //   return <span>{row.row.study}</span>;
          // }
          // fixed: "left"
        },
        {
          title: _this.$t("locale.pc.personal.t165"),
          align: "center",
          width: 120,
          render(_, row) {
            return <span>{row.row.distributionMoney.toFixed(2)}</span>;
          }
        },
        {
          title: this.$t("locale.pc.personal.t166"),
          align: "center",
          width: 140,
          render(_, row) {
            let date = row.row.createTime;
            if (date) {
              let _date = new Date(date);
              var year = _date.getFullYear();
              var month = _date.getMonth() + 1;
              var day = _date.getDate();
              var hours = _date.getHours();
              var minutes = _date.getMinutes();
              if (month < 10) {
                month = "0" + month;
              }
              if (day < 10) {
                day = "0" + day;
              }
              if (hours < 10) {
                hours = "0" + hours;
              }
              if (minutes < 10) {
                minutes = "0" + minutes;
              }
              return (
                <span>
                  {year + "." + month + "." + day + " " + hours + ":" + minutes}
                </span>
              );
            } else {
              return _this.$t("locale.pc.personal.unknow");
            }
          }
        }
      ],
      // 提现佣金记录
      withdrawal_columns: [
        {
          title: _this.$t("locale.pc.personal.t167"),
          key: "withdrawalMoney",
          align: "center",
          render(_, row) {
            return <span>{row.row.withdrawalMoney.toFixed(2)}</span>;
          }
        },
        {
          title: _this.$t("locale.pc.personal.t168"),
          key: "withdrawalType",
          align: "center",
          width: 130,
          render(_, row) {
            if (row.row.withdrawalType === 0) {
              return <span>{_this.$t("locale.pc.personal.t155")}</span>;
            } else if (row.row.withdrawalType === 1) {
              return <span>{_this.$t("locale.pc.personal.t169")}</span>;
            } else if (row.row.withdrawalType === 2) {
              return <span>{_this.$t("locale.pc.personal.t156")}</span>;
            } else {
              return <span>{_this.$t("locale.pc.personal.unknow")}</span>;
            }
          }
        },
        {
          title: _this.$t("locale.pc.personal.t170"),
          key: "status",
          align: "center",
          width: 130,
          render(_, row) {
            if (row.row.status === 0) {
              return <span>{_this.$t("locale.pc.personal.t171")}</span>;
            } else if (row.row.status === 1) {
              return (
                <span style="color: green;">
                  {_this.$t("locale.pc.personal.t172")}
                </span>
              );
            } else if (row.row.status === 2) {
              return (
                <span style="color: red;">
                  {_this.$t("locale.pc.personal.t173")}
                </span>
              );
            } else {
              return <span>{_this.$t("locale.pc.personal.unknow")}</span>;
            }
          }
        },
        {
          title: _this.$t("locale.pc.personal.t174"),
          key: "payee",
          align: "center",
          width: 130
        },
        {
          title: _this.$t("locale.pc.personal.t175"),
          key: "paymentAccount",
          align: "center",
          width: 130
        },
        {
          title: _this.$t("locale.pc.personal.t176"),
          align: "center",
          width: 140,
          render(_, row) {
            let date = row.row.withdrawalTime;
            if (date) {
              let _date = new Date(date);
              var year = _date.getFullYear();
              var month = _date.getMonth() + 1;
              var day = _date.getDate();
              var hours = _date.getHours();
              var minutes = _date.getMinutes();
              if (month < 10) {
                month = "0" + month;
              }
              if (day < 10) {
                day = "0" + day;
              }
              if (hours < 10) {
                hours = "0" + hours;
              }
              if (minutes < 10) {
                minutes = "0" + minutes;
              }
              return (
                <span>
                  {year + "." + month + "." + day + " " + hours + ":" + minutes}
                </span>
              );
            } else {
              return _this.$t("locale.pc.personal.unknow");
            }
          }
        }
      ],
      num_start: 0, //数字动画起始数
      theme: "light",
      is_edit: false,
      is_edit1: false,
      is_show_modal: false,
      is_show_wechat_pay: false, //微信支付二维码
      pay_type: "alipay", //支付类型
      recharge_num: "", //充值金额
      card_account: "", //激活卡
      single: "",
      // 考试分析数据
      page: 1,
      pageSize: 10,
      total: 0,
      record_list: [],
      security_edit_type: "password", //安全信息弹窗类型
      security_edit_title: "", //安全信息弹窗标题
      is_show_security_modal: false, //安全信息弹窗
      is_show_withdrawal_modal: false, //提现弹窗
      withdrawalFormItem: Object.assign({}, defaultWithdrawal), //提现信息
      is_show_poster: false, //是否展示推广海报
      withdrawalRuleValidate: {
        withdrawalMoney: [
          { required: true, message: "请输入提现金额", trigger: "blur" },
          {
            type: "number",
            message: "请输入正确的提现金额",
            trigger: "blur",
            transform(value) {
              return Number(value);
            }
          }
        ],
        withdrawalType: [
          { required: true, message: "请输入提现类型", trigger: "change" }
        ],
        payee: [{ required: true, message: "请输入收款人", trigger: "change" }],
        paymentAccount: [
          { required: true, message: "请输入收款账号", trigger: "change" }
        ]
      }, //提现规则验证
      userInfoRules:{
        mobile: [
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            { validator: validatephone, message: '请输入正确手机号', trigger: 'blur' },
        ],
        email: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { validator: validateemail, message: '请输入正确邮箱', trigger: 'blur' },
        ],
      },
      formItem: {}, //个人信息
      securityFormItem: {}, //安全信息
      passFormItem: {
        newPwd: "",
        email: "",
        code: ""
      }, //密码更改
      loading: false, //用户信息修改弹窗loading
      respond_code: "", //邮箱验证码
      interval: null, //定时器
      seconds: 0, //倒计时
      passFormRules: {
        code: [
          {
            validator: (rule, value, callback) => {
              var _code = new RegExp(this.respond_code);
              if (value == "") {
                callback(new Error(_this.$t("locale.pc.personal.t101")));
              } else if (!_code.test(value)) {
                callback(new Error(_this.$t("locale.pc.personal.t102")));
              } else {
                callback();
              }
            },
            trigger: "change"
          }
        ],
        newPwd: [
          {
            validator: (rule, value, callback) => {
              var pass = /^[\d_a-zA-Z_,.!@$^&%*-=+`~?:;]{6,16}$/;
              if (value == "") {
                callback(new Error("新密码不能为空"));
              } else if (!pass.test(value)) {
                callback(new Error(_this.$t("locale.pc.personal.t104")));
              } else {
                callback();
              }
            },
            trigger: "change"
          }
        ]
      },
      //公告
      notice: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      //通知
      notification: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      //公告列表
      notice_list: [],
      //通知列表
      notification_list: [],
      qr_wechat: "", //微信二维码连接
      account_tap_active: "1", //账户标签active
      distribution_tap_active: "1", //分销中心选中标签
      water_list: [], //资金流水
      water: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      //消费记录分页配置
      buyWater: {
        page: 1,
        pageSize: 4,
        total: 0
      },
      buy_water_list: [], //消费记录列表
      activation_record_list: [], //卡卷激活记录
      activation_record: {
        page: 1,
        pageSize: 8,
        total: 0
      },
      //分销分页配置
      distribution: {
        page: 1,
        pageSize: 7,
        total: 0
      },
      distribution_order: {}, //分销记录
      //分佣提现分页
      withdrawal: {
        page: 1,
        pageSize: 11,
        total: 0
      },
      withdrawal_log: {}, //分佣提现记录
      distribution_info: {}, //分销信息
      actived_notice: "1",
      wechat_pay_qr: "",
      websock: null,
      test_log: [],
      timer: null, //节流计时器
      socketFailedCount: 0 //socket重连计数器
      // tap: "test_analysis"
    };
  },
  filters: {
    formatGender(val, _this) {
      // console.log("formatGender:", _this);
      if (val == 1) {
        return _this.$t("locale.pc.personal.t105");
      } else if (val == 0) {
        return _this.$t("locale.pc.personal.t106");
      }
    },
    formatBirthday(val) {
      if (val) {
        let date = formatDateBirthday(val);
        return date;
      }
      return "";
    },
    formatDateTime(timestamp) {
      var newTime = new Date(timestamp);
      var y = newTime.getFullYear();
      var m = newTime.getMonth() + 1;
      var d = newTime.getDate();
      var add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      return add0(y) + "-" + add0(m) + "-" + add0(d);
    },
    formatTime(date) {
      if (date) {
        let _date = new Date(date);
        var year = _date.getFullYear();
        var month = _date.getMonth() + 1;
        var date = _date.getDate();
        var hours = _date.getHours();
        var minutes = _date.getMinutes();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        return year + "." + month + "." + date + " " + hours + ":" + minutes;
        // return `${_date.getFullYear()}.${_date.getMonth() +
        //   1}.${_date.getDate()} ${_date.getHours()}:${'0'+_date.getMinutes()}`;
      } else {
        return this.$t("locale.pc.personal.unknow");
      }
    }
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      web_info(state) {
        return state.web_info;
      },
      user_info(state) {
        return state.user_info;
      },
      theme_color(state) {
        return state.theme_color;
      },
      login_type(state) {
        return state.login_type;
      },
      major_list(state) {
        return state.major_list;
      },
      class_list(state) {
        return state.class_list;
      },
      kl_md(state) {
        return state.kl_md;
      }
    }),
    password_rule() {
      return new RegExp(this.param.new_password);
    },
    tap() {
      return this.$route.query.action || "test_analysis";
    },
    distribution_order_list() {
      return this.distribution_order.rows;
    },
    withdrawal_list() {
      return this.withdrawal_log.rows;
    }
  },
  watch: {
    // user_info(new_val, old_val) {
    //   this.$refs.number.reset();
    //   this.$refs.number.updateNumber({
    //     x: new_val.balance
    //   });
    // }
  },
  mounted() {
    
  },
  methods: {
    ...mapActions(["initBuyCourseRecord", "initMajorList", "initClassList"]),
    ...mapMutations([
      "UPDATE_USERINFO",
      "SET_IS_LOADING",
      "UPDATE_BUYRECORD_LIST",
      "SET_USERINFO"
    ]),
    // 更换头像
    async handleUploadAvatar(file) {
      let params = {
        id: this.user_info.id,
        file: file
      };
      let fd = new FormData();
      Object.keys(params).forEach(i => {
        fd.append(i, params[i]);
      });
      let result = await uploadAvatar(fd);
      if (result && result.data.code == 200) {
        this.UPDATE_USERINFO({
          avatar: result.data.data
        });
        this.initFormItem();
        this.$Message.success("更换成功！");
      } else {
        this.$Message.error("更换失败！");
      }
    },
    handleCancelForm() {
      this.is_show_security_modal = false;
    },
    toggleUserMsg(type) {
      this.informationNav = type;
    },
    toggleMessage(type) {
      this.messageNav = type;
    },
    toggleAccount(type) {
      this.accountNav = type;
    },
    async getMyTestLog(paper_id, test_log_id) {
      this.SET_IS_LOADING(true);

      let result = await getMyTestLog({
        paperId: paper_id,
        userId: this.user_info.id,
        id: test_log_id
      });
      console.log("result:---", result);
      if (result && result.data && result.data.code == 200) {
        this.test_log = result.data.data;
      } else {
        this.$Message.error("获取失败！");
        this.SET_IS_LOADING(true);
      }
    },
    closePoster() {
      this.is_show_poster = false;
    },
    downloadPoster() {
      // let poster = document.getElementById('poster');
      // let img = poster.getElementsByTagName('img')[0];
      // let url = img.src;
      // let a = document.createElement('a');            // 创建一个a节点插入的document
      // let event = new MouseEvent('click')             // 模拟鼠标click点击事件
      // a.download = 'poster'                    // 设置a节点的download属性值
      // a.href = url;                                   // 将图片的src赋值给a节点的href
      // a.dispatchEvent(event)
      // console.log(img)

      let poster = document.getElementById("poster_url");
      // let img = poster.getElementsByTagName('img')[0];
      let url = poster.src;
      let a = document.createElement("a"); // 创建一个a节点插入的document
      let event = new MouseEvent("click"); // 模拟鼠标click点击事件
      a.download = "poster"; // 设置a节点的download属性值
      a.href = url; // 将图片的src赋值给a节点的href
      a.dispatchEvent(event);
    },
    submitWithdrawal() {
      this.$refs["withdrawalFormItem"].resetFields();
      this.withdrawalFormItem = Object.assign({}, defaultWithdrawal);
      this.is_show_withdrawal_modal = true;
    },
    handleCancelWithdrawal(name) {
      this.is_show_withdrawal_modal = false;
    },
    handleSubmitWithdrawal(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (
            (
              this.distribution_info.profit - this.distribution_info.freezeMoney
            ).toFixed(2) -
              (+this.withdrawalFormItem.withdrawalMoney).toFixed(2) >=
            0
          ) {
            this.is_show_withdrawal_modal = false;
            let params = {
              withdrawalMoney: +this.withdrawalFormItem.withdrawalMoney,
              withdrawalType: +this.withdrawalFormItem.withdrawalType,
              payee: this.withdrawalFormItem.payee
                ? this.withdrawalFormItem.payee
                : this.$t("locale.pc.personal.t177"),
              paymentAccount: this.withdrawalFormItem.paymentAccount
                ? this.withdrawalFormItem.paymentAccount
                : this.$t("locale.pc.personal.t177"),
              userId: this.user_info.id
            };
            toWithdrawal(params)
              .then(res => {
                if (res && res.data && res.data.code == 200) {
                  this.getDistributionInfo();
                  this.getWithdrawalLog();
                  // console.log("提现成功",res.data.data);
                  this.$Message.success(this.$t("locale.pc.personal.t178"));
                } else {
                  // this.$Message.error(res.data.msg);
                  this.$Message.error({
                    content: res.data.msg,
                    duration: 3
                  });
                }
              })
              .catch(err => {
                this.$Message.error(this.$t("locale.pc.personal.t179"));
              });
            console.log(params);
          } else {
            this.$Message.error(this.$t("locale.pc.personal.t180"));
          }
        } else {
          // this.$Message.error('Fail!');
        }
      });
    },
    async getDistributionInfo() {
      let params = {
        userId: this.user_info.id
      };
      let result = await getDistributionInfo(params);
      if (result && result.data && result.data.code == 200) {
        // console.log("分销信息",result.data.data);
        this.distribution_info = result.data.data;
        this.setImg();
        // if(this.distribution_info.profit === 0){
        //   this.distribution_info.profit = "0.00";
        // }
        // console.log("分销信息",this.distribution_info);
      } else {
        this.$Message.error(this.$t("locale.pc.personal.t181"));
        this.SET_IS_LOADING(true);
        const { page, pageSize, total } = this.distribution;
        let params = {
          sort: "id desc",
          offset: pageSize * (page - 1),
          limit: pageSize,
          userId: this.user_info.id
        };
        let result = await getDistributionOrder(params);
        if (result && result.data && result.data.code == 200) {
          this.distribution_order = result.data.data;
          console.log("分销订单", result.data.data.rows);
        } else {
          this.$Message.error(this.$t("locale.pc.personal.t181"));
          this.SET_IS_LOADING(true);
        }
      }
    },
    async getDistributionOrder() {
      this.SET_IS_LOADING(true);
      const { page, pageSize, total } = this.distribution;
      let params = {
        sort: "id desc",
        // sortType: "desc",
        offset: pageSize * (page - 1),
        limit: pageSize,
        userId: this.user_info.id
      };
      let result = await getDistributionOrder(params);
      if (result && result.data && result.data.code == 200) {
        this.distribution_order = result.data.data;
        console.log("分销订单", result.data.data.rows);
      } else {
        this.$Message.error(this.$t("locale.pc.personal.t181"));
        this.SET_IS_LOADING(true);
        const { page, pageSize, total } = this.withdrawal;
        let params = {
          sort: "id desc",
          offset: pageSize * (page - 1),
          limit: pageSize,
          userId: this.user_info.id
        };
        let result = await getWithdrawalLog(params);
        if (result && result.data && result.data.code == 200) {
          this.withdrawal_log = result.data.data;
          console.log("提现记录", result.data.data);
        } else {
          this.$Message.error(this.$t("locale.pc.personal.t181"));
          this.SET_IS_LOADING(true);
        }
      }
    },
    async getWithdrawalLog() {
      this.SET_IS_LOADING(true);
      const { page, pageSize, total } = this.withdrawal;
      let params = {
        sort: "id desc",
        // sortType: "desc",
        offset: pageSize * (page - 1),
        limit: pageSize,
        userId: this.user_info.id
      };
      let result = await getWithdrawalLog(params);
      if (result && result.data && result.data.code == 200) {
        this.withdrawal_log = result.data.data;
        console.log("提现记录", result.data.data);
      } else {
        this.$Message.error("获取失败！");
        this.SET_IS_LOADING(true);
      }
    },
    copy() {
      // console.log(window.location.origin);
      const inp = document.createElement("input"); // create input标签
      document.body.appendChild(inp); // 添加到body中
      inp.value =
        window.location.origin + "/regist?fatherId=" + this.user_info.id; // 给input设置value属性为需要copy的内容
      inp.select(); // 选中
      document.execCommand("copy", false); // copy已经选中的内容
      inp.remove(); // 删除掉这个dom
      //前端获取二维码
      // let url = window.location.origin+"/regist?fatherId="+this.user_info.id;
      // this.is_show_poster = true;
      // let poster = document.getElementById('poster');
      // let img = poster.getElementsByTagName('img')[0];
      // if(img){
      //   poster.removeChild(img);
      // }

      // let qrcode = new QRCode(document.getElementById("poster"), {
      //   width : 200,
      //   height : 200
      // });
      // qrcode.makeCode(url);

      let url =
        window.location.origin + "/regist?fatherId=" + this.user_info.id;
      this.is_show_poster = true;
      let qrcode = new QRCode(document.getElementById("qrcode"), {
        // width: 100,
        // height: 100,
        width: 150,
        height: 150
      });
      qrcode.makeCode(url);
      // let bgImg = new Image();
      // bgImg.src = this.distribution_info.posterUrl;

      let bgImg = document.getElementById("poster");
      console.log(bgImg);
      console.log(parseInt(bgImg.style.width));
      console.log(parseInt(bgImg.style.height));
      let canvas = document.getElementById("myCanvas");
      canvas.width = parseInt(bgImg.style.width);
      canvas.height = parseInt(bgImg.style.height);
      let ctx = canvas.getContext("2d");
      // bgImg.crossOrigin = "*";
      document.querySelector("#qrcode >img").onload = () => {
        let qrcodeImg = document.getElementById("qrcode").lastChild;
        console.log("qrcodeImg:", qrcodeImg);
        ctx.drawImage(
          bgImg,
          0,
          0,
          parseInt(bgImg.style.width),
          parseInt(bgImg.style.height)
        );
        // ctx.fillStyle = "#6691FB";
        // ctx.fillRect(0, 0, 750, 1200);

        // ctx.fill();

        ctx.rect(295, 945, 160, 160);
        ctx.fillStyle = "#ffffff";
        ctx.fill();
        ctx.drawImage(
          qrcodeImg,
          300,
          950,
          parseInt(qrcodeImg.width),
          parseInt(qrcodeImg.height)
        );
        // let base64 = canvas.toDataURL("image/png");
        // let image = new Image();
        // image.src = canvas.toDataURL("image/png");
        let image = document.getElementById("poster_url");
        let posterBox = document.getElementById("poster_box");

        // console.log(image)
        image.src = canvas.toDataURL("image/png");
        canvas.style.display = "none";
        posterBox.style.display = "block";
        // qrcodeImg.style.display = "none";
        // dom.appendChild(image);
        // console.log(base64);
        // setTimeout(() => {
        //   bgImg.onload = function() {
        //   };
        // }, 10);

        //后端获取二维码
        // getQrcode(url).then(res=>{
        //   console.log(res.data);
        //   let img = document.createElement("img");
        //   img.width = "100";
        //   img.height = "100";
        //   img.src=res.data;
        //   this.$refs.poster.appendChild(img);
        // })
        alert(this.$t("locale.pc.personal.t182"));
      };
    },
    formatDate(date) {
      if (date) {
        let _date = new Date(date);
        var year = _date.getFullYear();
        var month = _date.getMonth() + 1;
        var date = _date.getDate();
        var hours = _date.getHours();
        var minutes = _date.getMinutes();
        if (month < 10) {
          month = "0" + month;
        }
        if (date < 10) {
          date = "0" + date;
        }
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        return year + "." + month + "." + date + " " + hours + ":" + minutes;
        // return `${_date.getFullYear()}.${_date.getMonth() +
        //   1}.${_date.getDate()} ${_date.getHours()}:${'0'+_date.getMinutes()}`;
      } else {
        return "";
      }
    },

    async getReadNotice() {
      this.SET_IS_LOADING(true);
      let result = await getReadNotice(this.user_info.id);
      if (result && result.data && result.data.code == 200) {
        if (result.data.data && result.data.data.readNoticeIds) {
          this.readList = JSON.parse(result.data.data.readNoticeIds);
        }
      } else {
        this.$Message.error(this.$t("locale.pc.personal.t107"));
        this.SET_IS_LOADING(false);
      }
    },
    formatter: function(num) {
      return num && num.toFixed(2);
    },
    getMajorName(id) {
      let res = this.major_list.filter(i => i.id == id);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return this.$t("locale.pc.personal.t108");
      }
    },
    getClassName(id) {
      let res = this.class_list.filter(i => i.id == id);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return this.$t("locale.pc.personal.t109");
      }
    },
    async activeCard() {
      if (!this.card_account) {
        return this.$Message.warning(this.$t("locale.pc.personal.t110"));
      }
      this.SET_IS_LOADING(true);
      let params = {
        userId: this.user_info.id,
        code: this.card_account
      };
      let result = await cardActivate(params);
      // console.log("激活码：", result);
      if (result && result.data && result.data.code == 200) {
        this.UPDATE_BUYRECORD_LIST(result.data.data);
        this.SET_IS_LOADING(false);
        this.$Message.success(this.$t("locale.pc.personal.t111"));
        this.card_account = "";
        this.initBuyCourseRecord();
        this.getActivationRecordListFun();
      }else if(result && result.data && result.data.code == 1001){
        this.$Message.warning(result.data.msg);
      }else {
        this.SET_IS_LOADING(false);
        this.$Message.error(
          this.$t("locale.pc.personal.t112") + result && result.data && result.data.msg
        );
      }
    },
    handleInput(e) {
      console.log("E:", e.target.value);
      let result = String(e.target.value).split(".");
      if (result.length > 1) {
        if (result[result.length - 1].length <= 2) {
          this.recharge_num = e.target.value;
        } else {
          this.recharge_num = parseFloat(
            result[0] + "." + result[result.length - 1].substring(0, 2)
          );
        }
      } else {
        if (!/\./.test(e.target.value)) {
          this.recharge_num = e.target.value;
        }
        return;
      }
    },
    //发送邮件
    sendEmailCode() {
      getEmailCode({
        to: this.user_info.email
      }).then(res => {
        if (res && res.data && res.data.code == 200) {
          this.respond_code = new RegExp(hexCharCodeToStr(res.data.data.code));
          this.seconds = 60;
          this.cuntDown();
        } else {
          this.$Message.error(this.$t("locale.pc.personal.t113"));
        }
      });
    },
    sendPhoneCode() {
      getSmsCode({
        number: this.user_info.mobile
      }).then(result => {
        if (result && result.data && result.data.code == 200) {
          this.respond_code = new RegExp(
            hexCharCodeToStr(result.data.data.RequestId)
          );
          this.seconds = 60;
          this.cuntDown();
        } else {
          this.$Message.error($t("locale.mobile.regist.t35"));
        }
      });
    },
    //倒计时
    cuntDown() {
      this.interval = setInterval(() => {
        this.seconds--;
        if (this.seconds <= 0) {
          this.seconds = 0;
          clearInterval(this.interval);
        }
      }, 1000);
    },
    //修改密码
    async updataPassword() {
      this.$refs["security_form"].validate(async valid => {
        if (valid) {
          this.SET_IS_LOADING(true);
          let params = {
            userId: this.user_info.id,
            newPwd: this.passFormItem.newPwd
          };
          let result = await updatePass(params);
          if (result && result.data && result.data.code == 200) {
            this.SET_IS_LOADING(false);
            this.$Message.success(this.$t("locale.pc.personal.t114"));
          } else {
            this.SET_IS_LOADING(false);
            this.$Message.error(this.$t("locale.pc.personal.t115"));
          }
        }
      });
    },
    async handleEditSecurity(name) {
      console.log("----------");
      console.log(name);
      console.log(this.$refs[name]);
      this.$refs[name].validate(async valid => {
        console.log(valid);
        if (valid) {
          console.log("--====---");
          let { qq, wechat, mobile, email } = this.securityFormItem;
          let params = { id: this.user_info.id };
          if (this.security_edit_type == "password") {
            this.updataPassword();
            return;
          }
          switch (this.security_edit_type) {
            case "qq":
              params = {
                ...params,
                qq
              };
              break;
            case "wechat":
              params = {
                ...params,
                wechat
              };
              break;
            case "email":
              params = {
                ...params,
                email
              };
              break;
            case "mobile":
              params = {
                ...params,
                mobile
              };
              break;
          }
          let fd = new FormData();
          Object.keys(params).forEach(i => {
            fd.append(i, params[i]);
          });
          let result = await userInfoUpdate(fd);
          if (result && result.data && result.data.code == 200) {
            this.is_show_security_modal = false;
            await this.UPDATE_USERINFO(result.data.data);
            this.initFormItem();
            this.$Message.success(this.$t("locale.pc.personal.t114"));
          } else {
            this.$Message.error(
              this.$t("locale.pc.personal.t115") +
                (result && result.data && result.data.msg)
            );
          }
        }else{
          console.log("验证失败");
        }
      });
    },
    handleCancelSecurity() {},
    // 查看已考试卷详情
    showTest(paper, id) {
      this.getMyTestLog(paper, id);
      console.log(id);
    },
    // 分页
    handlePage(val) {
      this.page = val;
      this.getData();
    },
    // ...mapMutations(["UPDATE_USERINFO", "SET_IS_LOADING"]),
    handleSelect(key) {
      this.$router.push({
        path: "",
        query: {
          action: key
        }
      });
    },
    changePass() {
      // this.is_show_modal = true;
    },
    handleEdit(boolean, name) {
      boolean = boolean || false;
      this[name] = boolean;
    },
    cancel() {
      this.is_show_modal = false;
    },
    async getData() {
      this.SET_IS_LOADING(true);
      let result = await paperTestList({
        // id: this.courseId,
        sort: "id desc",
        offset: this.pageSize * (this.page - 1),
        limit: this.pageSize,
        userId: this.user_info.id
      });
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        // this.record_list = [...this.record_list, ...data.rows];
        this.record_list = data.rows;
        this.total = data.total;
        // console.log(this.record_list);
      } else {
        this.$Message.error(
          this.$t("locale.pc.personal.t116"),
          result && result.data && result.data.msg
        );
        this.SET_IS_LOADING(false);
      }
      this.SET_IS_LOADING(false);
    },
    handeCancel() {
      this.initFormItem();
    },
    trimDate(date) {
      if (date) {
        let _date = new Date(date);
        return `${_date.getFullYear()}-${_date.getMonth() +
          1}-${_date.getDate()}`;
      } else {
        return this.$t("locale.pc.personal.unknow");
      }
    },
    async handleSubmit() {
      this.SET_IS_LOADING(true);
      let params = {
        id: this.user_info.id,
        ...this.formItem,
        birthday: this.trimDate(this.formItem.birthday)
      };
      let fd = new FormData();
      Object.keys(params).forEach(i => {
        fd.append(i, params[i]);
      });
      let result = await userInfoUpdate(fd);
      if (result && result.data && result.data.code == 200) {
        this.UPDATE_USERINFO(result.data.data);
        this.initFormItem();
        this.SET_IS_LOADING(false);
        this.$Message.success(this.$t("locale.pc.personal.t114"));
      } else {
        this.initFormItem();
        this.SET_IS_LOADING(false);
        this.$Message.error(
          this.$t("locale.pc.personal.t115") +
            (result && result.data && result.data.msg)
        );
      }
    },
    initFormItem() {
      let {
        acName,
        birthday,
        gender,
        idNumber,
        introduce,
        qq,
        wechat,
        mobile,
        email
      } = this.user_info;
      this.formItem = {
        acName,
        birthday: birthday
          ? this.trimDate(birthday)
          : this.trimDate(new Date().getTime()),
        gender,
        idNumber,
        introduce
      };
      this.securityFormItem = {
        qq,
        wechat,
        mobile,
        email
      };
    },
    handleShowEdit(type) {
      switch (type) {
        case "qq":
          this.security_edit_title = this.$t("locale.pc.personal.t117");
          break;
        case "wechat":
          this.security_edit_title = this.$t("locale.pc.personal.t118");
          break;
        case "email":
          this.security_edit_title = this.$t("locale.pc.personal.t119");
          break;
        case "mobile":
          this.security_edit_title = this.$t("locale.pc.personal.t120");
          break;
        case "password":
          this.security_edit_title = this.$t("locale.pc.personal.t121");
          break;
      }
      // console.log(this.user_info);
      this.initFormItem();
      this.security_edit_type = type;
      this.is_show_security_modal = true;
    },
    async wechatAction(type) {
      console.log("type:", type);
      if (type == "unbind") {
        let params = {
          id: this.user_info.id,
          unbind: true
        };
        let result = await unbindWechat(params);
        if (result && result.data && result.data.code == 200) {
          // await this.UPDATE_USERINFO(result.data.data);
          this.SET_USERINFO(result.data.data);
          this.initFormItem();
          this.$Message.success(this.$t("locale.pc.personal.t122"));
        } else {
          this.$Message.error(
            this.$t("locale.pc.personal.t123") +
              (result && result.data && result.data.msg)
          );
        }
        this.is_show_security_modal = false;
      } else {
        this.getWechatBindQRCode();
        // window.location.href = this.qr_wechat;
      }
    },
    async getWechatBindQRCode() {
      console.log("调起微信登录");
      let result = await wxQrLogin(2);
      console.log("绑定微信二维码：", result);
      if (result && result.data && result.data.code == 200) {
        this.qr_wechat = result.data.data.oauthUrl;
        console.log("绑定微信", this.qr_wechat);
        window.location.href = this.qr_wechat;
      } else {
        this.$Message.error(
          this.$t("locale.pc.personal.t124") +
            (result && result.data && result.data.msg)
        );
      }
    },
    handleAccountTapChange(name) {
      this.$router.replace({
        path: "",
        query: {
          action: "my_account",
          account_tap: name
        }
      });
    },
    handleDistributionTapChange(name) {
      this.$router.replace({
        path: "",
        query: {
          action: "my_distribution",
          account_tap: name
        }
      });
    },
    toRecharge() {
      this.$router.push("/personal?action=my_account&account_tap=2");
      this.account_tap_active = "2";
    },
    // toDistribution() {
    //   this.$router.push("/personal?action=my_distribution&distribution_tap=2");
    //   this.distribution_tap_active = "2";
    // },
    async getWaterListFun() {
      this.SET_IS_LOADING(true);
      const { page, pageSize, total } = this.water;
      let params = {
        userId: this.user_info.id,
        sort: "id desc",
        offset: pageSize * (page - 1),
        limit: pageSize
      };
      let result = await getWaterList(params);
      console.log("result:", result);
      if (result && result.data && result.data.code == 200) {
        this.water_list = result.data.data.rows;
        this.water.total = result.data.data.total;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$Message.error(this.$t("locale.pc.personal.t124"));
      }
    },
    async getBuyWaterListFun() {
      this.SET_IS_LOADING(true);
      const { page, pageSize, total } = this.buyWater;
      let params = {
        userId: this.user_info.id,
        sort: "id desc",
        offset: pageSize * (page - 1),
        limit: pageSize
      };
      let result = await getBuyWaterList(params);
      console.log("消费记录:", result);
      if (result && result.data && result.data.code == 200) {
        this.buy_water_list = result.data.data.rows;
        this.buyWater.total = result.data.data.total;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$Message.error(this.$t("locale.pc.personal.t124"));
      }
    },
    async getActivationRecordListFun() {
      this.SET_IS_LOADING(true);
      const { page, pageSize, total } = this.activation_record;
      let params = {
        userId: this.user_info.id,
        sort: "id desc",
        offset: pageSize * (page - 1),
        limit: pageSize
      };
      let result = await getActivationRecordList(params);
      console.log("result:", result);
      if (result && result.data && result.data.code == 200) {
        this.activation_record_list = result.data.data.rows;
        this.activation_record.total = result.data.data.total;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$Message.error(this.$t("locale.pc.personal.t124"));
      }
    },
    async handlePay() {
      if (!this.recharge_num || this.recharge_num == 0) {
        this.$Message.info(this.$t("locale.pc.personal.t125"));
        return;
      }
      // if(!this.readSingle){
      //   this.$Message.info("请先勾选阅读协议");
      //   return;
      // }
      if (process.client) {
        //获取支付类型
        let pay_type = this.pay_type;
        let params = {
          userid: this.user_info.id
        };
        //手动输入的金额
        const { recharge_num } = this;
        //手动输入的金额和卡片的金额同时存在，充值金额为手动输入的金额
        console.log("充值:", params);
        if (pay_type == "wechatpay") {
          params = {
            ...params,
            amount: Number(recharge_num) * 100
          };
          params = {
            ...params,
            body:
              this.$t("locale.pc.personal.t126") +
              params.amount / 100 +
              this.$t("locale.pc.personal.t127")
          };
          this.wechat_pay_qr = `${baseUrl}/wx/native/unifiedOrder?userid=${params.userid}&body=${params.body}&amount=${params.amount}`;
          this.is_show_wechat_pay = true;
          // let result = await buildPcOrder(params);
          // console.log("微信扫码支付：", result);
          // if (result && result.status == 200) {
          //   // this.wechat_pay_qr = result.data;
          //   this.is_show_wechat_pay = true;
          //   let blob = new Blob([result.data], { type: "image/png" });
          //   let url = window.URL.createObjectURL(blob);
          //   let files = new window.File([blob], new Date().getTime(), {
          //     type: "image/png"
          //   });
          //   dataURLtoFile(url, res => {
          //     // this.wechat_pay_qr = res;
          //     console.log("file", res);
          //   });
          //   fileToBase64(files, res => {
          //     this.wechat_pay_qr = res;
          //     console.log("base64", res);
          //   });
          //   console.log("imageUrl:", this.wechat_pay_qr);
          //   console.log("blob:", blob);
          //   console.log("url:", url);
          //   console.log("files:", files);
          // } else {
          //   this.$Message.error("充值失败！");
          // }
        } else if (pay_type == "alipay") {
          //支付宝充值金额不用除100
          params = {
            ...params,
            amount: Number(recharge_num)
          };
          params = {
            ...params,
            orderNo: this.user_info.id + new Date().getTime(),
            body:
              this.$t("locale.pc.personal.t126") +
              params.amount +
              this.$t("locale.pc.personal.t127")
          };
          let result = await buildPcAliOrder(params);
          console.log(result);
          if (result && result.data && result.data.code == 200) {
            window.location.href = result.data.data;
          } else {
            this.$Message.error(
              this.$t("locale.pc.personal.t128") + result.data
                ? result.data.msg
                : null
            );
          }
        }
      }
    },
    async getClassInfo() {
      if (!this.user_info.userClass) {
        return;
      }
      this.SET_IS_LOADING(true);
      let result = await getClassInfo(this.user_info.userClass);
      if (result && result.data && result.data.code == 200) {
        this.userClassInfo = result.data.data;
      } else {
        this.$Message.error("服务不可用！");
      }
      this.SET_IS_LOADING(false);
    },
    async getNotice(type, fetch_type) {
      this.SET_IS_LOADING(true);
      let params = {
        sort: "id desc",
        isOpen: 1,
        type
      };
      if (type == 1) {
        params = {
          ...params,
          offset: this.notification.pageSize * (this.notification.page - 1),
          limit: this.notification.pageSize
        };
      } else if (type == 2) {
        params = {
          ...params,
          offset: this.notice.pageSize * (this.notice.page - 1),
          limit: this.notice.pageSize
        };
      }
      let result = await getNotice(params);
      if (result && result.data.code == 200) {
        this.getReadNotice();
        if (fetch_type == "pullup") {
          if (type == 1) {
            this.notification_list = [
              ...this.notification_list,
              ...result.data.data.rows
            ];
          } else if (type == 2) {
            this.notice_list = [...this.notice_list, ...result.data.data.rows];
          }
        } else {
          if (type == 1) {
            this.notification_list = result.data.data.rows;
          } else if (type == 2) {
            this.notice_list = result.data.data.rows;
          }
        }
        if (type == 1) {
          this.notification.total = result.data.data.total;
        } else if (type == 2) {
          this.notice.total = result.data.data.total;
        }
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        this.$Message.error(this.$t("locale.pc.personal.t107"));
      }
    },
    handleChangePage(type, current_num) {
      if (type == 1) {
        this.notification = {
          ...this.notification,
          page: current_num
        };
      } else if (type == 2) {
        this.notice = {
          ...this.notice,
          page: current_num
        };
      }
      this.getNotice(type);
    },
    handleChangeWaterPage(n) {
      this.water = {
        ...this.water,
        page: n
      };
      this.getWaterListFun();
    },
    //消费记录
    handleChangeBuyWaterPage(n) {
      this.buyWater = {
        ...this.buyWater,
        page: n
      };
      this.getBuyWaterListFun();
    },
    handleChangeDistributionPage(n) {
      this.distribution = {
        ...this.distribution,
        page: n
      };
      this.getDistributionOrder();
    },
    handleChangeWithdrawalPage(n) {
      this.withdrawal = {
        ...this.withdrawal,
        page: n
      };
      this.getWithdrawalLog();
    },
    handleChangeActivationRecordPage(n) {
      this.activation_record = {
        ...this.activation_record,
        page: n
      };
      this.getActivationRecordListFun();
    },
    async handleLogout() {
      this.$Modal.confirm({
        title: this.$t("locale.pc.personal.t129"),
        content: this.$t("locale.pc.personal.t130"),
        onOk: async () => {
          let params = {};
          if (this.login_type == "email") {
            params = {
              email: this.user_info.email
            };
          } else if (this.login_type == "mobile") {
            params = {
              account: this.user_info.mobile
            };
          } else {
            params = {
              account: this.user_info.account
            };
          }
          let result = await userLogout(params);
          if (result && result.data.code === 200) {
            this.$store.commit("SIGN_OUT");
            this.$Message.success(this.$t("locale.pc.personal.t131"));
            this.$router.replace("/login");
          } else {
            this.$Message.success(this.$t("locale.pc.personal.t132"));
          }
        },
        onCancel: () => {
          // this.$Message.info("取消操作");
        }
      });
    },
    checkPaySuccess() {
      let offset_key = [
        "app_id",
        "auth_app_id",
        "charset",
        "method",
        "out_trade_no",
        "seller_id",
        "sign",
        "sign_type",
        "timestamp",
        "total_amount",
        "trade_no",
        "version"
      ];
      for (let i = 0; i < offset_key.length; i++) {
        if (!this.$route.query[offset_key[i]]) {
          return false;
        }
      }
      return true;
    },
    payResultFun() {
      if (process.client) {
        let ali_pay_result = this.checkPaySuccess();
        if (ali_pay_result) {
          this.$Message.success(this.$t("locale.pc.personal.t133"));
        }
      }
    },
    initWebSocket() {
      if (process.client) {
        if ("WebSocket" in window) {
          if (!this.user_info.id) {
            return;
          }
          //初始化weosocket
          const wsuri = socketUrl + "pay/" + this.user_info.id;
          this.websock = new WebSocket(wsuri);
          this.websock.onmessage = this.websocketonmessage;
          this.websock.onopen = this.websocketonopen;
          this.websock.onerror = this.websocketonerror;
          this.websock.onclose = this.websocketclose;

          window.addEventListener("beforeunload", this.closeConnection, false);
        } else {
          this.$Message.error(this.$t("locale.pc.personal.t134"));
        }
      }
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      clearTimeout(this.timer);
      this.timer = null;
      this.socketFailedCount = 0;
    },
    websocketonerror() {
      //连接建立失败重连
      console.log("socket连接失败！");
      this.retryConnectSocket();
    },
    websocketonmessage(e) {
      //数据接收
      console.log("收到socket:", e);
      console.log(e.data || e);
      try {
        const result = JSON.parse(e.data);
        if (result.code == 200) {
          //手动输入的金额
          const { recharge_num } = this;
          let recharge = recharge_num;
          console.log("增加余额:", recharge);
          this.num_start =
            Number(this.user_info.balance) + (Number(recharge) * 100) / 100;
          this.UPDATE_USERINFO({
            balance:
              Number(this.user_info.balance) + (Number(recharge) * 100) / 100
          });
          this.is_show_wechat_pay = false;
        } else {
          this.$Message.error(this.$t("locale.pc.personal.t128"));
        }
      } catch (e) {
        console.log(e);
      }
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    async websocketclose(e) {
      //关闭
      console.log("断开连接", e);
      this.retryConnectSocket();
    },
    closeConnection() {
      return new Promise((res, rej) => {
        try {
          window.removeEventListener("beforeunload", this.closeConnection);
          this.websock && this.websock.close();

          if (this.timer) {
            clearTimeout(this.timer);
            this.timer = null;
            this.socketFailedCount = 0;
          }
        } catch (e) {
          console.log("关闭socket错误：", e);
        }
        res();
      }).then();
    },
    toPath(path) {
      this.$router.push({ path: path });
    },
    async setImg() {
      const { posterUrl } = this.distribution_info;
      let result = await downloadFile(posterUrl);
      fileToBase64(result.data, res => {
        // console.log("posterImgFile:", res);
        this.$refs.posterImg.src = res;
      });
    },
    initPage() {
      if (!this.token || Object.keys(this.user_info).length == 0) {
        this.$router.push("/login");
        return;
      }
      let msg = this.$route.query.msg;
      if (msg) {
        this.$Message.warning(msg);
      }
      if (this.$route.query.account_tap) {
        this.account_tap_active = this.$route.query.account_tap;
      }
      if (this.$route.query.distribution) {
        this.distribution_tap_active = this.$route.query.distribution;
      }
      this.initClassList();
      this.initMajorList();
      this.getData();
      // this.getWechatBindQRCode();
      this.getNotice(1); //获取通知
      this.getNotice(2); //获取公告
      this.getClassInfo();
      this.initFormItem();
      this.getWaterListFun();
      this.getBuyWaterListFun();
      this.getActivationRecordListFun();
      this.payResultFun();
      this.initWebSocket();
      this.getDistributionInfo();
      this.getDistributionOrder();
      this.getWithdrawalLog();
    },
    retryConnectSocket() {
      this.debounce(async () => {
        this.socketFailedCount = this.socketFailedCount + 1;
        if (this.socketFailedCount < 10) {
          await this.closeConnection();
          this.initWebSocket();
        } else {
          console.info("websocket fail to connection , please retry later!");
          this.timer = null;
        }
      }, 3000);
    },
    debounce(fn, wait) {
      return !(() => {
        if (this.timer !== null) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(fn, wait);
      })();
    }
  },
  created() {
    this.initPage();
  },
  activated() {
    this.initPage();
  },
  deactivated() {
    this.timer = null;
    this.socketFailedCount = 0;
    this.closeConnection();
  },
  destroyed() {
    this.timer = null;
    this.socketFailedCount = 0;
    this.closeConnection();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.page-pc_poster {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9999999;
  background-color: rgba(0, 0, 0, 0.4);
  #myCanvas {
    margin: 70px auto 0;
  }
  .poster,
  .poster_url {
    width: 100%;
    text-align: center;

    > img {
      margin-top: 70px;
      width: 300px;
      height: 480px;
    }
  }
  .poster {
    visibility: hidden;
    z-index: 0;
    position: relative;
  }
  #qrcode {
    visibility: hidden;
    z-index: 0;
    // position: relative;
    position: absolute;
  }
  .btn {
    width: 300px;
    display: flex;
    margin: 20px auto 0;
    justify-content: space-between;
    // justify-content: space-around;
    .close,
    .download {
      width: 110px;
      height: 30px;
      color: #fff;
      background-color: var(--theme-color);
      border-radius: 5px;
      line-height: 30px;
      text-align: center;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      cursor: pointer;
    }
  }
}
.page-personal {
  width: 100%;

  // margin-top: 70px;
  .page-personal-container {
    width: 1200px;
    margin: 0 auto;
    padding: 50px 0;
    // background-color: red;
    // height: 500px;
    display: flex;
    justify-content: space-between;
    .personal-left {
      width: 20%;
      height: 840px;
      background-color: #ffffff;
      box-shadow: 0px 3px 32px 0px rgba(74, 82, 95, 0.18);
      border-radius: 4px;
      position: relative;
      .logout {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        padding: 0 10px;
        font-weight: bold;
        box-sizing: border-box;
        img {
          background: var(--theme-color);
        }
      }
      .logout:hover {
        color: var(--theme-color);
        text-decoration: underline;
      }
      .user {
        padding: 60px 0;
        .head {
          width: 100px;
          height: 100px;
          margin: 0 auto;
          border-radius: 50%;
          overflow: hidden;
          background-color: #bec5d1;
          img {
            width: 100px;
            height: 100px;
            display: block;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
          }
        }
        .username {
          font-size: 18px;
          font-weight: bold;
          color: #5b6069;
          text-align: center;
          margin: 10px 0;
        }
        .major {
          font-size: 14px;
          font-weight: bold;
          color: #5b6069;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            margin-right: 10px;
            background: var(--theme-color);
          }
        }
      }
      .menu-list {
        .menu-item {
          width: 100%;
          height: 66px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          // font-weight: bold;
          color: #a2a8b3;
          cursor: pointer;
          .img1 {
            display: block;
            margin-right: 10px;
            background: #a2a8b3;
          }
          .img2 {
            display: none;
            margin-right: 10px;
            background: var(--theme-color);
          }
        }
        .menu-item.active {
          background: var(--theme-color);
          color: #ffffff;
          .img1 {
            display: none;
          }
          .img2 {
            display: block;
          }
        }
      }
    }
    .personal-right {
      width: 79%;
      height: 840px;
      background-color: #ffffff;
      box-shadow: 0px 3px 32px 0px rgba(74, 82, 95, 0.18);
      border-radius: 4px;

      .test_analysis {
        .test_list {
          .title {
            font-size: 24px;
            font-weight: bold;
            color: #5b6069;
            border-bottom: 1px solid #dfe7f5;
            padding: 30px 0 10px 60px;
          }
          .test-tab {
            margin-top: 30px;
          }
        }
      }
      .user_information {
        .nav-bar {
          border-bottom: 1px solid #dfe7f5;
          padding: 30px 0 10px 60px;
          font-size: 20px;
          font-weight: bold;
          color: #5b6069;
          display: flex;
          .nav-item {
            margin-right: 40px;
            cursor: pointer;
          }
          .nav-item.active {
            color: var(--theme-color);
            position: relative;
            &::after {
              content: "";
              display: block;
              width: 100%;
              height: 3px;
              position: absolute;
              background-color: var(--theme-color);
              left: 0;
              bottom: -10px;
            }
          }
        }
        .nav-content {
          .singlepos {
            display: flex;
            font-family: SourceHanSansSC;
            margin: 30px 0 0 60px;
            font-weight: 400;
            font-size: 14px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 20px;
            text-decoration: none;
            .personal_introduct {
              width: 549px;
              word-break: break-all;
              white-space: normal;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            > p {
              line-height: 30px;
              margin-right: 11px;
            }
          }
        }
        .nav-content-security {
          width: 100%;
          box-sizing: border-box;
          padding: 30px 60px;
          .set-row {
            width: 60%;
            font-size: 16px;
            display: flex;
            padding: 10px 0;
            justify-content: space-between;
          }
        }
        .class_info {
          box-sizing: border-box;
          padding: 46px 60px;
          width: 100%;
          .class_info_row {
            margin-bottom: 20px;
            display: flex;
            width: 100%;
            font-size: 16px;
            color: #101010;
            font-style: normal;
            letter-spacing: 0px;
            line-height: 30px;
            .class_info_row_left {
              width: 10%;
              color: #afb0b3;
            }
            .class_info_row_right {
              width: 90%;
              color: #707680;
            }
          }
        }
      }
      .message_center {
        .nav-bar {
          border-bottom: 1px solid #dfe7f5;
          padding: 30px 0 10px 60px;
          font-size: 20px;
          font-weight: bold;
          color: #5b6069;
          display: flex;
          .nav-item {
            margin-right: 40px;
            cursor: pointer;
          }
          .nav-item.active {
            color: var(--theme-color);
            position: relative;
            &::after {
              content: "";
              display: block;
              width: 100%;
              height: 3px;
              position: absolute;
              background-color: var(--theme-color);
              left: 0;
              bottom: -10px;
            }
          }
        }
        .nav-content {
          margin: 30px 0 0 50px;
          .news {
            font-size: 16px;
            color: #707680;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            margin: 10px 0;
            width: 100%;
            .new-left {
              padding-left: 10px;
              width: 600px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .new-right {
              width: 20%;
            }
          }
          .pagination {
            text-align: center;
            margin-top: 20px;
          }
          .news:hover {
            color: var(--theme-color);
          }
        }
      }
      .my_account {
        .nav-bar {
          border-bottom: 1px solid #dfe7f5;
          padding: 30px 0 10px 60px;
          font-size: 20px;
          font-weight: bold;
          color: #5b6069;
          display: flex;
          .nav-item {
            margin-right: 40px;
            cursor: pointer;
          }
          .nav-item.active {
            color: var(--theme-color);
            position: relative;
            &::after {
              content: "";
              display: block;
              width: 100%;
              height: 3px;
              position: absolute;
              background-color: var(--theme-color);
              left: 0;
              bottom: -10px;
            }
          }
        }
        .nav-content {
          // margin: 0px 0 0 50px;
          margin: 30px 0 0 50px;
          .account_information {
            .account-left {
              font-size: 16px;
              font-weight: bold;
              color: #43474d;
            }
            .account-right {
              font-size: 36px;
              font-weight: bold;
              color: #ff7c7c;
            }
            .account-unit {
              font-size: 16px;
              font-weight: bold;
              color: #ff7c7c;
            }
          }
          .recharge {
            font-size: 16px;
            font-weight: bold;
            color: #5a5e66;
            margin: 20px 0;
          }
          .paymethod {
            .pay-title {
              font-size: 18px;
              font-weight: bold;
              color: #5a5e66;
              margin: 20px 0;
            }
            .pay-content {
              // display: flex;
              // .ivu-radio-inner {
              //   top: 67px;
              //   left: 68px;
              // }
              .pay-box {
                margin-right: 30px;
                width: 260px;
                height: 120px;
                border-radius: 4px;
                border: solid 2px #f1f5fc;
                font-size: 16px;
                // text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                  margin-left: 20px;
                }
                // line-height: 114px;
              }
              .pay-box.active {
                background-color: #f1f5fc;
                border: solid 2px var(--theme-color);
              }
            }
          }
          .read-msg {
            margin: 20px 0;
          }
          .paysubmit {
            margin-top: 40px;
            .ivu-btn {
              width: 137px;
              height: 38px;
              // margin: 27px 0px 0px 48px;
              background-color: var(--theme-color);
              border: none;
              color: rgb(255, 255, 255);
              border-radius: 4px;
              font-size: 14px;
              padding: 0px;
              text-align: center;
              line-height: 20px;
              font-weight: bold;
              font-style: normal;
              opacity: 1;
            }
          }
          .study-title {
            font-size: 18px;
            font-weight: bold;
            color: #43474d;
          }
          .input-cart-number {
            margin: 20px 0;
            display: flex;
            .ivu-btn {
              background-color: var(--theme-color);
              color: #ffffff;
            }
            .ivu-input {
              height: 36px;
            }
          }
          .buy-water-box {
            width: 744px;
            height: 130px;
            background-color: var(--theme-color);
            border-radius: 6px;
            // margin-bottom: 40px;
            margin: 0px 50px 40px 50px;
            overflow: hidden;
            .box-title {
              width: 100%;
              height: 30px;
              padding: 0 20px;
              box-sizing: border-box;
              font-size: 12px;
              font-weight: bold;
              color: #878d99;
              line-height: 30px;
              background-color: var(--theme-color);
              color: #ffffff;
            }
            .box-content {
              width: 100%;
              height: 100px;
              background: #eaeff1;
              box-sizing: border-box;
              padding: 0 20px;
              .course-img {
                width: 120px;
                height: 76px;
                margin-top: 12px;
                background-color: #43474d;
                border-radius: 4px;
              }
              .course-name {
                font-size: 14px;
                font-weight: bold;
                color: #707680;
                margin-top: 16px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                line-height: 18px;
                height: 36px;
                margin-bottom: 12px;
              }
              .acname {
                font-size: 14px;
                font-weight: bold;
                // color: #9da5b3;
              }
              .price-num {
                font-size: 14px;
                font-weight: bold;
                color: #707680;
                margin-top: 16px;
              }
              .look-course {
                color: var(--theme-color);
                text-decoration: underline;
                cursor: pointer;
                font-size: 14px;
                margin-top: 40px;
                margin-left: 40px;
              }
            }
          }
        }
      }
      .my_distribution {
        .distribution_prefix {
          margin: 23px 0px 23px 55px;
          display: flex;
          .p1 {
            width: 10px;
            height: 31px;
            background-color: var(--theme-color);
            border: none;
            font-size: 14px;
            padding: 0px;
            margin-right: 10px;
            text-align: center;
            line-height: 20px;
            font-weight: normal;
            font-style: normal;
            opacity: 1;
          }
          > a {
            font-family: SourceHanSansSC;
            font-weight: 700;
            font-size: 14px;
            color: var(--theme-color);
            font-style: normal;
            letter-spacing: 2px;
            line-height: 20px;
            text-decoration: none;
            padding: 8px 0px 0px 22px;
          }
          > p {
            font-family: SourceHanSansSC;
            font-weight: 700;
            font-size: 22px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 31px;
            text-decoration: none;
          }
        }
        .user_balance {
          // width: 300px;
          width: 500px;
          margin: 0 auto;
          text-align: center;
          .author {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            margin: 0 auto;
            .head {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .money_content {
            font-family: SourceHanSansSC;
            font-weight: 700;
            // font-size: 26px;
            font-size: 17px;
            font-style: normal;
            letter-spacing: 0px;
            line-height: 50px;
            .money {
              color: rgb(240, 40, 35);
            }
          }

          .withdrawal {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          }
          .share_btn {
            cursor: pointer;
            margin: 0 auto 10px;
            background: var(--theme-color);
            width: 160px;
            // width: 100%;
            height: 30px;
            border-radius: 5px;
            color: #ffffff;
            text-align: center;
            line-height: 30px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
          }
        }
        .ivu-page {
          margin-top: 12px;
          text-align: center;
        }
        .account_information {
          width: 826px;
          margin: auto;
          display: flex;
          .i1 {
            font-family: SourceHanSansSC;
            font-weight: 700;
            font-size: 36px;
            color: rgba(240, 40, 35, 1);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 54px;
            text-decoration: none;
          }
          > button {
            width: 60px;
            height: 25px;
            cursor: pointer;
            margin: 18px 66px 0px 27px;
            background-color: rgb(240, 40, 35);
            border: none;
            box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 3px 0px;
            color: #ffffff;
            border-radius: 4px;
            font-size: 14px;
            text-align: center;
            font-weight: normal;
            font-style: normal;
            opacity: 1;
          }
          > a {
            font-family: SourceHanSansSC;
            font-weight: 400;
            font-size: 12px;
            margin: 0px 67px 0px 10px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 60px;
            text-decoration: none;
          }
          > p {
            font-family: SourceHanSansSC;
            font-weight: 700;
            font-size: 13px;
            color: rgb(16, 16, 16);
            font-style: normal;
            letter-spacing: 0px;
            line-height: 60px;
            text-decoration: none;
          }
        }
        .ivu-tabs {
          .ivu-tabs-content {
            .ivu-tabs-tabpane {
              .ivu-table-wrapper {
                margin: auto;
                .ivu-table {
                  .ivu-table-header {
                    > table {
                      > thead {
                        > tr {
                          > th {
                            padding: 4px;
                            font-weight: bold;
                            text-align: center;
                            color: rgb(255, 255, 255);
                            line-height: 20px;
                            background: var(--theme-color);
                            font-size: 14px;
                            justify-content: center;
                          }
                        }
                      }
                    }
                  }
                }
              }
              .balance {
                margin-left: 72px;
                font-family: SourceHanSansSC;
                font-weight: 700;
                font-size: 18px;
                color: rgb(240, 40, 35);
                font-style: normal;
                letter-spacing: 0px;
                line-height: 27px;
                text-decoration: none;
              }
              .recharge {
                margin: 15px 0px 20px 55px;
                font-family: SourceHanSansSC;
                font-weight: 700;
                font-size: 16px;
                color: rgb(16, 16, 16);
                font-style: normal;
                letter-spacing: 0px;
                line-height: 24px;
                text-decoration: none;
              }
              .paymethod {
                > p {
                  margin: 0px 0px 20px 49px;
                  font-family: SourceHanSansSC;
                  font-weight: 700;
                  font-size: 16px;
                  color: rgb(16, 16, 16);
                  font-style: normal;
                  letter-spacing: 0px;
                  line-height: 24px;
                  text-decoration: none;
                }
                .ivu-radio-group {
                  width: 100%;
                  .ivu-radio-wrapper {
                    padding-left: 21px;
                    margin: 5px auto;
                    background-color: rgb(243, 246, 247);
                    border: 1px solid rgb(243, 246, 247);
                    width: 886px;
                    height: 45px;
                    line-height: 45px;
                  }
                }
                .terms_service {
                  margin: 67px 0px 0px 47px;
                  .ivu-checkbox-wrapper {
                    font-family: SourceHanSansSC;
                    font-weight: 400;
                    font-size: 12px;
                    color: rgb(16, 16, 16);
                    font-style: normal;
                    letter-spacing: 0px;
                    line-height: 16px;
                    text-decoration: none;
                    > a {
                      font-family: SourceHanSansSC;
                      font-weight: 700;
                      font-size: 12px;
                      color: rgb(82, 144, 255) !important;
                      font-style: normal;
                      letter-spacing: 0px;
                      line-height: 16px;
                      text-decoration: none;
                    }
                  }
                }
                .paysubmit {
                  .ivu-btn {
                    width: 137px;
                    height: 38px;
                    margin: 27px 0px 0px 48px;
                    background-color: var(--theme-color);
                    border: none;
                    color: rgb(255, 255, 255);
                    border-radius: 4px;
                    font-size: 14px;
                    padding: 0px;
                    text-align: center;
                    line-height: 20px;
                    font-weight: bold;
                    font-style: normal;
                    opacity: 1;
                  }
                }
                .paytype-box {
                  > img {
                    width: 25px;
                    height: auto;
                    margin: 0 4px;
                  }
                  display: inline-flex;
                  height: 100%;
                  align-items: center;
                  vertical-align: bottom;
                  color: #666;
                  font-size: 16px;
                }
              }
              .camilo {
                display: flex;
                margin-left: 53px;
                > p {
                  margin-right: 27px;
                  font-family: SourceHanSansSC;
                  font-weight: 700;
                  font-size: 18px;
                  color: rgb(16, 16, 16);
                  font-style: normal;
                  letter-spacing: 0px;
                  line-height: 27px;
                  text-decoration: none;
                }
                .ivu-input-wrapper {
                  .ivu-input-inner-container {
                    .ivu-input {
                      height: 30px;
                      border-color: rgb(187, 187, 187);
                      border-width: 1px;
                      border-style: solid;
                      font-size: 14px;
                      text-align: left;
                      font-weight: normal;
                      font-style: normal;
                      opacity: 1;
                    }
                  }
                }
                .ivu-btn {
                  width: 80px;
                  height: 30px;
                  margin-left: 22px;
                  background-color: var(--theme-color);
                  border: none;
                  box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 6px 0px;
                  color: rgb(255, 255, 255);
                  border-radius: 4px;
                  font-size: 14px;
                  text-align: center;
                  font-weight: bold;
                  font-style: normal;
                  opacity: 1;
                }
              }
              .cardrtail {
                margin: auto;
                .ivu-table-wrapper {
                  .ivu-table {
                    .ivu-table-header {
                      > table {
                        > thead {
                          > tr {
                            > th {
                              padding: 4px;
                              font-weight: bold;
                              // text-align: center;
                              background: rgb(242, 240, 240);
                              color: rgb(0, 0, 0);
                              line-height: 20px;
                              background-color: rgba(242, 240, 240, 1);
                              font-size: 14px;
                              justify-content: center;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
              .associated {
                width: 910px;
                height: 392px;
                margin: 48px auto;
                line-height: 20px;
                border-radius: 2px;
                color: rgba(16, 16, 16, 1);
                box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
                border: 1px solid rgba(255, 255, 255, 0);
                .ass_title {
                  display: flex;
                  width: 100%;
                  height: 42px;
                  border-bottom: 1px solid #d5d4d4;
                  > img {
                    margin: 0px 10px;
                  }
                  > p {
                    line-height: 42px;
                    font-family: SourceHanSansSC;
                    font-weight: 700;
                    font-size: 18px;
                    color: rgb(16, 16, 16);
                    font-style: normal;
                    letter-spacing: 0px;
                  }
                }
                .courselist {
                  display: flex;
                  height: 39px;
                  width: 859px;
                  line-height: 39px;
                  margin: auto;
                  border-bottom: 1px solid #eeeded;
                  .c1 {
                    margin-left: 31px;
                    font-family: SourceHanSansSC;
                    font-weight: 400;
                    font-size: 12px;
                    color: rgb(16, 16, 16);
                    font-style: normal;
                    letter-spacing: 0px;
                    text-decoration: none;
                  }
                  .c2 {
                    margin-left: 570px;
                    font-family: SourceHanSansSC;
                    font-weight: 400;
                    font-size: 12px;
                    color: rgb(16, 16, 16);
                    font-style: normal;
                    letter-spacing: 0px;
                    text-decoration: none;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.page-pc_poster {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9999999;
  background-color: rgba(0, 0, 0, 0.4);
  #myCanvas {
    margin: 70px auto 0;
  }
  .poster,
  .poster_url {
    width: 100%;
    text-align: center;

    > img {
      margin-top: 70px;
      width: 300px;
      height: 480px;
    }
  }
  .btn {
    width: 300px;
    display: flex;
    margin: 20px auto 0;
    justify-content: space-between;
    // justify-content: space-around;
    .close,
    .download {
      width: 110px;
      height: 30px;
      color: #fff;
      background-color: var(--theme-color);
      border-radius: 5px;
      line-height: 30px;
      text-align: center;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.ivu-badge-dot {
  top: -10px;
  right: -2px;
}
// .ivu-radio-inner {
//   top: 67px;
//   left: 68px;
// }
.pay-content {
  .ivu-radio-inner {
    top: 67px;
    left: 68px;
  }
}
.ivu-input-group-append,
.ivu-input-group-prepend {
  background-color: var(--theme-color);
  color: #ffffff;
}
</style>
